Dark mode for bootstrap

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 19.0.0-next.2 
+
+### Features 
+
+* **bootstrap:** improvements regarding support of dark mode  
+  * toggle button: CSS class of label changed from `btn-outline-light` to `btn-outline-secondary`
+  * modal: background color changed from `rgba(0, 0, 0, 0.32)` to `rgba(0, 0, 0, 0.5)`
+* **demo:** support of dark mode for bootstrap examples by making use of data attribute `data-bs-theme` with value `light` or `dark` depending on theme preferences
+
 ## 19.0.0-next.1 (2025-01-17)
 
 ### General

README.md

@@ -65,12 +65,12 @@ This is an [**Angular**](https://angular.dev) project for dynamic forms based on
 
 ## **Packages**
 
-### **Version 19** [![Build Status](https://dev.azure.com/alexandergebuhr/dynamic-forms/_apis/build/status/dynamic-forms-publish?branchName=refs/tags/19.0.0-next.1)](https://dev.azure.com/alexandergebuhr/dynamic-forms/_build/latest?definitionId=45&branchName=refs/tags/19.0.0-next.1)
+### **Version 19** [![Build Status](https://dev.azure.com/alexandergebuhr/dynamic-forms/_apis/build/status/dynamic-forms-publish?branchName=refs/tags/19.0.0-next.2)](https://dev.azure.com/alexandergebuhr/dynamic-forms/_build/latest?definitionId=45&branchName=refs/tags/19.0.0-next.2)
 
-- `npm install @dynamic-forms/core@19.0.0-next.1`
-- `npm install @dynamic-forms/bootstrap@19.0.0-next.1`
-- `npm install @dynamic-forms/material@19.0.0-next.1`
-- `npm install @dynamic-forms/markdown@19.0.0-next.1`
+- `npm install @dynamic-forms/core@19.0.0-next.2`
+- `npm install @dynamic-forms/bootstrap@19.0.0-next.2`
+- `npm install @dynamic-forms/material@19.0.0-next.2`
+- `npm install @dynamic-forms/markdown@19.0.0-next.2`
 
 ### **Version 18** [![Build Status](https://dev.azure.com/alexandergebuhr/dynamic-forms/_apis/build/status/dynamic-forms-publish?branchName=refs/tags/18.1.2)](https://dev.azure.com/alexandergebuhr/dynamic-forms/_build/latest?definitionId=45&branchName=refs/tags/18.1.2)
 

apps/demo/src/app/form/bootstrap/bootstrap-form.component.html

@@ -3,6 +3,7 @@
     #form
     [definition]="data().definition"
     [model]="data().model"
+    [attr.data-bs-theme]="theme$ | async"
     (formSubmit)="onFormSubmit($event)"
     (valueChange)="valueChange.emit($event)"
   />

apps/demo/src/app/form/bootstrap/bootstrap-form.component.ts

@@ -1,16 +1,25 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { ThemeService } from '../../services/theme-service';
 import { FormBase } from '../form-base';
 import { BootstrapFormModule } from './bootstrap-form.module';
 
 @Component({
   selector: 'app-bootstrap-form',
   templateUrl: './bootstrap-form.component.html',
   styleUrl: './bootstrap-form.component.scss',
-  imports: [BootstrapFormModule],
+  imports: [BootstrapFormModule, AsyncPipe],
 })
 export class BootstrapFormComponent extends FormBase {
-  constructor(protected override dialog: MatDialog) {
+  readonly theme$: Observable<string>;
+
+  constructor(
+    private themeService: ThemeService,
+    protected override dialog: MatDialog,
+  ) {
     super(dialog);
+    this.theme$ = this.themeService.theme$;
   }
 }

apps/demo/src/app/services/theme-service.ts

@@ -2,20 +2,26 @@ import { MediaMatcher } from '@angular/cdk/layout';
 import { DestroyRef, Injectable } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Store } from '@ngxs/store';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { ThemeMode } from '../state/preferences/preferences.model';
 import { PreferencesState } from '../state/preferences/preferences.state';
 
 @Injectable({ providedIn: 'root' })
 export class ThemeService {
+  private readonly _theme: BehaviorSubject<string>;
   private readonly _defaultMode: ThemeMode;
+  readonly theme$: Observable<string>;
 
   constructor(
     private store: Store,
     private media: MediaMatcher,
     private destroyRef: DestroyRef,
   ) {
-    this._defaultMode = this.media.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.Dark : ThemeMode.Light;
+    const isDarkMode = this.media.matchMedia('(prefers-color-scheme: dark)').matches;
+    this._defaultMode = isDarkMode ? ThemeMode.Dark : ThemeMode.Light;
+    this._theme = new BehaviorSubject<string>(isDarkMode ? 'dark' : 'light');
+    this.theme$ = this._theme.asObservable();
   }
 
   init(): void {
@@ -31,8 +37,10 @@ export class ThemeService {
 
   private setThemeMode(mode?: ThemeMode): void {
     if ((mode || this._defaultMode) === ThemeMode.Dark) {
+      this._theme.next('dark');
       document.body.classList.add('dark-mode');
     } else {
+      this._theme.next('light');
       document.body.classList.remove('dark-mode');
     }
   }

apps/demo/src/assets/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "build": "187",
   "buildUrl": "https://dev.azure.com/alexandergebuhr/dynamic-forms/_build?definitionId=39&_a=summary",
   "release": "17",
@@ -16,7 +16,7 @@
   },
   "versions": [
     {
-      "name": "19.0.0-next.1",
+      "name": "19.0.0-next.2",
       "url": "https://dynamic-forms.azurewebsites.net/v19/dev"
     },
     {

apps/demo/src/assets/config.prod.json

@@ -1,5 +1,5 @@
 {
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "build": "187",
   "buildUrl": "https://dev.azure.com/alexandergebuhr/dynamic-forms/_build?definitionId=39&_a=summary",
   "release": "17",
@@ -16,7 +16,7 @@
   },
   "versions": [
     {
-      "name": "19.0.0-next.1",
+      "name": "19.0.0-next.2",
       "url": "https://dynamic-forms.azurewebsites.net/v19"
     },
     {

apps/demo/src/styles.scss

@@ -70,7 +70,7 @@ body {
 
   @include mat.all-component-themes($app-light-theme);
   @include mat.card-overrides((
-    elevated-container-color: #fafafa,
+    elevated-container-color: #fff,
   ));
 
   .button-content {

libs/bootstrap/assets/scss/theme.scss

@@ -301,28 +301,6 @@ $dynamic-form-errors-margin-top: null !default;
           &.disabled {
             pointer-events: none;
           }
-
-          &.btn-outline-light {
-            color: rgba(0, 0, 0);
-            background-color: rgb(239, 240, 241);
-            border-color: rgb(239, 240, 241);
-
-            &:hover {
-              background-color: rgb(229, 230, 231);
-              border-color: rgb(229, 230, 231);
-            }
-
-            &.disabled {
-              color: rgba(0, 0, 0, 0.5);
-              background-color: rgb(249, 250, 251);
-              border-color: rgb(249, 250, 251);
-            }
-
-            &.active {
-              background-color: rgb(219, 220, 221);
-              border-color: rgb(219, 220, 221);
-            }
-          }
         }
       }
     }
@@ -333,7 +311,7 @@ $dynamic-form-errors-margin-top: null !default;
     }
 
     .dynamic-form-modal {
-      background-color: rgba(0, 0, 0, 0.32);
+      background-color: rgba(0, 0, 0, 0.50);
 
       &.modal {
         display: block;

libs/bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-forms/bootstrap",
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "author": "dynamic-forms",
   "description": "dynamic-forms - component library using bootstrap",
   "keywords": [
@@ -24,7 +24,7 @@
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
-    "@dynamic-forms/core": "19.0.0-next.1",
+    "@dynamic-forms/core": "19.0.0-next.2",
     "bootstrap": "^5.3.3",
     "inputmask": "^5.0.8",
     "rxjs": "^7.4.0"

libs/bootstrap/src/lib/dynamic-form-input/dynamic-form-toggle/dynamic-form-toggle.component.html

@@ -12,7 +12,7 @@
       [readonly]="readonly"
     />
     <label
-      class="btn btn-outline-light"
+      class="btn btn-outline-secondary"
       [for]="inputId + '-' + index"
       [class.disabled]="control.disabled || option.disabled"
       [class.active]="control.value === option.value"

libs/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-forms/core",
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "author": "dynamic-forms",
   "description": "dynamic-forms - core library",
   "keywords": [

libs/markdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-forms/markdown",
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "author": "dynamic-forms",
   "description": "dynamic-forms - markdown library",
   "keywords": [
@@ -23,7 +23,7 @@
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
-    "@dynamic-forms/core": "19.0.0-next.1",
+    "@dynamic-forms/core": "19.0.0-next.2",
     "marked": "^15.0.0",
     "rxjs": "^7.4.0"
   },

libs/material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-forms/material",
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "author": "dynamic-forms",
   "description": "dynamic-forms - component library using material",
   "keywords": [
@@ -25,7 +25,7 @@
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
     "@angular/material": "^19.0.0",
-    "@dynamic-forms/core": "19.0.0-next.1",
+    "@dynamic-forms/core": "19.0.0-next.2",
     "bootstrap": "^5.3.3",
     "inputmask": "^5.0.8",
     "rxjs": "^7.4.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-forms/common",
-  "version": "19.0.0-next.1",
+  "version": "19.0.0-next.2",
   "author": "dynamic-forms",
   "description": "dynamic-forms is an Angular project for dynamic forms based on JSON.",
   "keywords": [
@@ -114,9 +114,9 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsdoc": "^50.6.1",
+    "eslint-plugin-jsdoc": "^50.6.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^5.2.2",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-unused-imports": "^3.2.0",
     "jasmine-core": "~5.5.0",
     "jasmine-spec-reporter": "~7.0.0",