From 37adca2abec51c41f39f24c811441911c1b4eb32 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 11:56:05 +0200
Subject: [PATCH] Task/enable dark mode of Bootstrap (#8167)

Enable dark mode of Bootstrap
---
 CHANGELOG.md                                       |  1 +
 apps/client/src/app/app.component.ts               |  2 ++
 .../admin-settings/admin-settings.component.html   |  6 +++++-
 apps/client/src/styles/bootstrap.scss              |  1 -
 libs/ui/.storybook/preview.js                      | 14 +++++++++++++-
 .../membership-card/membership-card.component.html |  6 +++++-
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0998ecb494..6d9071643c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the colors of the muted texts and borders by enabling the dark mode of `bootstrap`
 - Reduced the size of the global stylesheet by removing the unused utilities of `bootstrap`
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index fba00e1c47..c9e124723d 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -350,9 +350,11 @@ export class GfAppComponent implements OnInit {
     if (isDarkColorScheme(userPreferredColorScheme)) {
       this.document.body.classList.add('theme-dark');
       this.document.body.classList.remove('theme-light');
+      this.document.documentElement.setAttribute('data-bs-theme', 'dark');
     } else {
       this.document.body.classList.add('theme-light');
       this.document.body.classList.remove('theme-dark');
+      this.document.documentElement.setAttribute('data-bs-theme', 'light');
     }
 
     this.document
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.html b/apps/client/src/app/components/admin-settings/admin-settings.component.html
index 059e4177fe..bfaf2da846 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.html
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.html
@@ -3,7 +3,11 @@
     <div class="col">
       <h2 class="text-center" i18n>Data Providers</h2>
       @if (isGhostfolioApiKeyValid === false) {
-        <mat-card appearance="outlined" class="my-3 special">
+        <mat-card
+          appearance="outlined"
+          class="my-3 special"
+          data-bs-theme="light"
+        >
           <mat-card-header>
             <mat-card-title class="align-items-center d-flex m-0"
               >Ghostfolio Premium
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index e144732e1e..680971f77c 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -25,7 +25,6 @@ $container-max-widths: (
   xl: 1140px
 );
 $cyan: #17a2b8;
-$enable-dark-mode: false;
 $enable-rfs: false;
 $enable-smooth-scroll: false;
 $figure-caption-font-size: 90%;
diff --git a/libs/ui/.storybook/preview.js b/libs/ui/.storybook/preview.js
index c29b26fd61..dbef588032 100644
--- a/libs/ui/.storybook/preview.js
+++ b/libs/ui/.storybook/preview.js
@@ -1,5 +1,8 @@
 import '@angular/localize/init';
-import { withThemeByClassName } from '@storybook/addon-themes';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute
+} from '@storybook/addon-themes';
 
 const preview = {
   decorators: [
@@ -10,6 +13,15 @@ const preview = {
         Dark: 'theme-dark',
         Light: 'theme-light'
       }
+    }),
+    withThemeByDataAttribute({
+      attributeName: 'data-bs-theme',
+      defaultTheme: 'Light',
+      parentSelector: 'html',
+      themes: {
+        Dark: 'dark',
+        Light: 'light'
+      }
     })
   ]
 };
diff --git a/libs/ui/src/lib/membership-card/membership-card.component.html b/libs/ui/src/lib/membership-card/membership-card.component.html
index 70f6e372e3..7a73995cdb 100644
--- a/libs/ui/src/lib/membership-card/membership-card.component.html
+++ b/libs/ui/src/lib/membership-card/membership-card.component.html
@@ -1,5 +1,9 @@
 <div class="card-wrapper position-relative" [class.hover-3d]="hover3d">
-  <div class="card-container" [class.premium]="name === 'Premium'">
+  <div
+    class="card-container"
+    [attr.data-bs-theme]="name === 'Premium' ? null : 'light'"
+    [class.premium]="name === 'Premium'"
+  >
     <a
       class="card-item d-flex flex-column justify-content-between p-4"
       [routerLink]="routerLinkPricing"