Enable dark mode of Bootstrap

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`
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 
 ## 3.86.0 - 2026-10-13

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

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%;

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'
+      }
     })
   ]
 };