fix: hide Toggle Dark Mode from Grid Menu by default

Author: ghiscoding

src/app/examples/grid-composite-editor.component.html

@@ -1,7 +1,7 @@
 <div id="demo-container" class="container-fluid">
   <h2>
     {{title}}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkModeGrid()"
+    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()"
           data-test="toggle-dark-mode">
       <span>Toggle Dark Mode</span>
     </button>

src/app/examples/grid-composite-editor.component.ts

@@ -84,7 +84,7 @@ const myCustomTitleValidator = (value: any, args: any) => {
   encapsulation: ViewEncapsulation.None,
 })
 export class GridCompositeEditorComponent implements OnDestroy, OnInit {
-  private _darkModeGrid = false;
+  private _darkMode = false;
   title = 'Example 30: Composite Editor Modal';
   subTitle = `Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
   <br>The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as inline editing (see <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank">Composite Editor - Uncyclo</a>.)`;
@@ -384,7 +384,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
         container: '#demo-container',
         rightPadding: 10
       },
-      darkMode: this._darkModeGrid,
+      darkMode: this._darkMode,
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       showCustomFooter: true,
@@ -443,6 +443,15 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
       },
       // when using the cellMenu, you can change some of the default options and all use some of the callback methods
       enableCellMenu: true,
+      gridMenu: {
+        hideToggleDarkModeCommand: false, // disabled command by default
+        onCommand: (_, args) => {
+          if (args.command === 'toggle-dark-mode') {
+            this._darkMode = !this._darkMode; // keep local toggle var in sync
+            this.toggleBodyBackground();
+          }
+        }
+      }
     };
   }
 
@@ -625,7 +634,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
       onRendered: (modalElm) => {
         // Bootstrap requires extra attribute when toggling Dark Mode (data-bs-theme="dark")
         // we need to manually add this attribute  ourselve before opening the Composite Editor Modal
-        modalElm.dataset.bsTheme = this._darkModeGrid ? 'dark' : 'light';
+        modalElm.dataset.bsTheme = this._darkMode ? 'dark' : 'light';
       },
       onSave: (formValues, _selection, dataContext) => {
         const serverResponseDelay = 50;
@@ -762,16 +771,20 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
     this.editQueue = [];
   }
 
-  toggleDarkModeGrid() {
-    this._darkModeGrid = !this._darkModeGrid;
-    if (this._darkModeGrid) {
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
+  }
+
+  toggleBodyBackground() {
+    if (this._darkMode) {
       document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');
       document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'dark';
     } else {
       document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
       document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
     }
-    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkModeGrid });
   }
 
   mockProducts() {

src/app/examples/grid-contextmenu.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
   <h2>
     {{title}}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkModeGrid()"
+    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()"
           data-test="toggle-dark-mode">
       <span>Toggle Dark Mode</span>
     </button>

src/app/examples/grid-contextmenu.component.ts

@@ -547,7 +547,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     );
   }
 
-  toggleDarkModeGrid() {
+  toggleDarkMode() {
     this._darkModeGrid = !this._darkModeGrid;
     if (this._darkModeGrid) {
       document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');

src/app/modules/angular-slickgrid/global-grid-options.ts

@@ -146,6 +146,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
       exportExcelCommandKey: 'EXPORT_TO_EXCEL',
       exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
       refreshDatasetCommandKey: 'REFRESH_DATASET',
+      toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
       toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
       togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
     },
@@ -158,6 +159,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     hideForceFitButton: false,
     hideRefreshDatasetCommand: false,
     hideSyncResizeButton: true,
+    hideToggleDarkModeCommand: true,
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'fa fa-bars',
@@ -168,6 +170,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconExportExcelCommand: 'fa fa-file-excel-o text-success',
     iconExportTextDelimitedCommand: 'fa fa-download',
     iconRefreshDatasetCommand: 'fa fa-refresh',
+    iconToggleDarkModeCommand: 'fa fa-moon-o mdi mdi-brightness-4',
     iconToggleFilterCommand: 'fa fa-random',
     iconTogglePreHeaderCommand: 'fa fa-random',
     menuWidth: 16,