feat(common): add optional "Toggle Dark Mode" in Grid Menu

examples/vite-demo-vanilla-bundle/public/i18n/en.json

@@ -61,6 +61,7 @@
   "STARTS_WITH": "Starts With",
   "SYNCHRONOUS_RESIZE": "Synchronous resize",
   "TOGGLE_ALL_GROUPS": "Toggle all Groups",
+  "TOGGLE_DARK_MODE": "Toggle Dark Mode",
   "TOGGLE_FILTER_ROW": "Toggle Filter Row",
   "TOGGLE_PRE_HEADER_ROW": "Toggle Pre-Header Row",
   "UNFREEZE_COLUMNS": "Unfreeze Columns",

examples/vite-demo-vanilla-bundle/public/i18n/fr.json

@@ -61,6 +61,7 @@
   "STARTS_WITH": "Commence par",
   "SYNCHRONOUS_RESIZE": "Redimension synchrone",
   "TOGGLE_ALL_GROUPS": "Basculer tous les groupes",
+  "TOGGLE_DARK_MODE": "Basculer le mode clair/sombre",
   "TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
   "TOGGLE_PRE_HEADER_ROW": "Basculer la ligne de pré-en-tête",
   "UNFREEZE_COLUMNS": "Dégeler les colonnes",

examples/vite-demo-vanilla-bundle/src/examples/example01.ts

@@ -66,6 +66,14 @@ export default class Example01 {
       gridHeight: 225,
       gridWidth: 800,
       rowHeight: 33,
+      gridMenu: {
+        hideToggleDarkModeCommand: false, // disabled command by default
+        onCommand: (_, args) => {
+          if (args.command === 'toggle-dark-mode') {
+            this._darkModeGrid1 = !this._darkModeGrid1; // keep local toggle var in sync
+          }
+        }
+      }
     };
 
     // copy the same Grid Options and Column Definitions to 2nd grid

examples/vite-demo-vanilla-bundle/src/examples/example12.scss

@@ -3,3 +3,7 @@ $control-height: 2.4em;
 
 // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
+
+.slick-dark-mode .slick-pagination {
+  background-color: #2d2d2d;
+}

examples/vite-demo-vanilla-bundle/src/examples/example12.ts

@@ -475,6 +475,15 @@ export default class Example12 {
       },
       // 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();
+          }
+        }
+      }
     };
   }
 
@@ -749,13 +758,17 @@ export default class Example12 {
 
   toggleDarkMode() {
     this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode };
+    this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode });
+  }
+
+  toggleBodyBackground() {
     if (this._darkMode) {
       document.querySelector('.demo-container')?.classList.add('dark-mode');
     } else {
       document.querySelector('.demo-container')?.classList.remove('dark-mode');
     }
-    this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode };
-    this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode });
   }
 
   mockProducts() {

examples/vite-demo-vanilla-bundle/src/material-styles.scss

@@ -118,7 +118,7 @@
     .slick-dark-mode .ms-dark-mode,
     .slick-dark-mode {
       --slick-base-dark-menu-bg-color: #212121;
-      --slick-primary-color: #4caf50;
+      --slick-primary-color: #66bb6a;
       --slick-button-primary-bg-color: var(--slick-primary-color);
       --slick-cell-box-shadow: none;
       --slick-column-picker-checkbox-color: #49a54e;
@@ -130,18 +130,18 @@
       --slick-container-border-left: 1px solid #505050;
       --slick-container-border-bottom: 1px solid #505050;
       --slick-pane-top-border-top: 1px solid #505050;
-      --slick-filled-filter-color: #00ab3b;
+      --slick-filled-filter-color: #66bb6a;
       --slick-highlight-color: #49a54e;
       --slick-pagination-icon-color: #49a54e;
-      --slick-checkbox-selector-checked-color: #4caf50;
+      --slick-checkbox-selector-checked-color: #66bb6a;
       --slick-row-mouse-hover-box-shadow: none;
       --slick-row-mouse-hover-color: #505050;
       --slick-row-selected-color: #474747;
       --slick-checkbox-selector-opacity: 1;
       --slick-checkbox-selector-icon-height: 22px;
       --slick-checkbox-selector-icon-bg-color: transparent;
       --slick-checkbox-selector-icon-border: none;
-      --ms-ok-button-text-color: #4caf50;
+      --ms-ok-button-text-color: #66bb6a;
     }
   }
 }

packages/common/src/constants.ts

@@ -64,6 +64,7 @@ export class Constants {
     TEXT_SORT_DESCENDING: 'Sort Descending',
     TEXT_STARTS_WITH: 'Starts With',
     TEXT_TOGGLE_ALL_GROUPS: 'Toggle all Groups',
+    TEXT_TOGGLE_DARK_MODE: 'Toggle Dark Mode',
     TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
     TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
     TEXT_UNFREEZE_COLUMNS: 'Unfreeze Columns',

packages/common/src/extensions/slickGridMenu.ts

@@ -565,160 +565,158 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
     const translationPrefix = getTranslationPrefix(gridOptions);
     const commandLabels = this._addonOptions?.commandLabels;
 
-    // show grid menu: Unfreeze Columns/Rows
-    if (this.gridOptions && this._addonOptions && !this._addonOptions.hideClearFrozenColumnsCommand) {
-      const commandName = 'clear-pinning';
-      if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-        gridMenuCommandItems.push(
-          {
+    if (this._addonOptions && this.gridOptions) {
+      // show grid menu: Unfreeze Columns/Rows
+      if (!this._addonOptions.hideClearFrozenColumnsCommand) {
+        const commandName = 'clear-pinning';
+        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+          gridMenuCommandItems.push({
             iconCssClass: this._addonOptions.iconClearFrozenColumnsCommand || 'fa fa-times',
             titleKey: `${translationPrefix}${commandLabels?.clearFrozenColumnsCommandKey ?? 'CLEAR_PINNING'}`,
             disabled: false,
             command: commandName,
             positionOrder: 52
-          }
-        );
+          });
+        }
       }
-    }
 
-    if (this.gridOptions && (this.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad)) {
-      // show grid menu: Clear all Filters
-      if (this.gridOptions && this._addonOptions && !this._addonOptions.hideClearAllFiltersCommand) {
-        const commandName = 'clear-filter';
-        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-          gridMenuCommandItems.push(
-            {
+      if (this.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad) {
+        // show grid menu: Clear all Filters
+        if (!this._addonOptions.hideClearAllFiltersCommand) {
+          const commandName = 'clear-filter';
+          if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+            gridMenuCommandItems.push({
               iconCssClass: this._addonOptions.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
               titleKey: `${translationPrefix}${commandLabels?.clearAllFiltersCommandKey ?? 'CLEAR_ALL_FILTERS'}`,
               disabled: false,
               command: commandName,
               positionOrder: 50
-            }
-          );
+            });
+          }
         }
-      }
 
-      // show grid menu: toggle filter row
-      if (this.gridOptions && this._addonOptions && !this._addonOptions.hideToggleFilterCommand) {
-        const commandName = 'toggle-filter';
-        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-          gridMenuCommandItems.push(
-            {
+        // show grid menu: toggle filter row
+        if (!this._addonOptions.hideToggleFilterCommand) {
+          const commandName = 'toggle-filter';
+          if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+            gridMenuCommandItems.push({
               iconCssClass: this._addonOptions.iconToggleFilterCommand || 'fa fa-random',
               titleKey: `${translationPrefix}${commandLabels?.toggleFilterCommandKey ?? 'TOGGLE_FILTER_ROW'}`,
               disabled: false,
               command: commandName,
               positionOrder: 53
-            }
-          );
+            });
+          }
         }
-      }
 
-      // show grid menu: refresh dataset
-      if (backendApi && this.gridOptions && this._addonOptions && !this._addonOptions.hideRefreshDatasetCommand) {
-        const commandName = 'refresh-dataset';
-        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-          gridMenuCommandItems.push(
-            {
+        // show grid menu: refresh dataset
+        if (backendApi && !this._addonOptions.hideRefreshDatasetCommand) {
+          const commandName = 'refresh-dataset';
+          if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+            gridMenuCommandItems.push({
               iconCssClass: this._addonOptions.iconRefreshDatasetCommand || 'fa fa-refresh',
               titleKey: `${translationPrefix}${commandLabels?.refreshDatasetCommandKey ?? 'REFRESH_DATASET'}`,
               disabled: false,
               command: commandName,
-              positionOrder: 57
-            }
-          );
+              positionOrder: 58
+            });
+          }
         }
       }
-    }
 
-    if (this.gridOptions.showPreHeaderPanel) {
-      // show grid menu: toggle pre-header row
-      if (this.gridOptions && this._addonOptions && !this._addonOptions.hideTogglePreHeaderCommand) {
-        const commandName = 'toggle-preheader';
+      // show grid menu: toggle dark mode
+      if (!this._addonOptions.hideToggleDarkModeCommand) {
+        const commandName = 'toggle-dark-mode';
         if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-          gridMenuCommandItems.push(
-            {
+          gridMenuCommandItems.push({
+            iconCssClass: this._addonOptions.iconToggleDarkModeCommand || 'fa fa-random',
+            titleKey: `${translationPrefix}${commandLabels?.toggleDarkModeCommandKey ?? 'TOGGLE_DARK_MODE'}`,
+            disabled: false,
+            command: commandName,
+            positionOrder: 54
+          });
+        }
+      }
+
+      if (this.gridOptions.showPreHeaderPanel) {
+        // show grid menu: toggle pre-header row
+        if (!this._addonOptions.hideTogglePreHeaderCommand) {
+          const commandName = 'toggle-preheader';
+          if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+            gridMenuCommandItems.push({
               iconCssClass: this._addonOptions.iconTogglePreHeaderCommand || 'fa fa-random',
               titleKey: `${translationPrefix}${commandLabels?.togglePreHeaderCommandKey ?? 'TOGGLE_PRE_HEADER_ROW'}`,
               disabled: false,
               command: commandName,
               positionOrder: 53
-            }
-          );
+            });
+          }
         }
       }
-    }
 
-    if (this.gridOptions.enableSorting) {
-      // show grid menu: Clear all Sorting
-      if (this.gridOptions && this._addonOptions && !this._addonOptions.hideClearAllSortingCommand) {
-        const commandName = 'clear-sorting';
-        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-          gridMenuCommandItems.push(
-            {
+      if (this.gridOptions.enableSorting) {
+        // show grid menu: Clear all Sorting
+        if (!this._addonOptions.hideClearAllSortingCommand) {
+          const commandName = 'clear-sorting';
+          if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+            gridMenuCommandItems.push({
               iconCssClass: this._addonOptions.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
               titleKey: `${translationPrefix}${commandLabels?.clearAllSortingCommandKey ?? 'CLEAR_ALL_SORTING'}`,
               disabled: false,
               command: commandName,
               positionOrder: 51
-            }
-          );
+            });
+          }
         }
       }
-    }
 
-    // show grid menu: Export to file
-    if (this.gridOptions?.enableTextExport && this._addonOptions && !this._addonOptions.hideExportCsvCommand) {
-      const commandName = 'export-csv';
-      if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-        gridMenuCommandItems.push(
-          {
+      // show grid menu: Export to file
+      if (this.gridOptions.enableTextExport && !this._addonOptions.hideExportCsvCommand) {
+        const commandName = 'export-csv';
+        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+          gridMenuCommandItems.push({
             iconCssClass: this._addonOptions.iconExportCsvCommand || 'fa fa-download',
             titleKey: `${translationPrefix}${commandLabels?.exportCsvCommandKey ?? 'EXPORT_TO_CSV'}`,
             disabled: false,
             command: commandName,
-            positionOrder: 54
-          }
-        );
+            positionOrder: 55
+          });
+        }
       }
-    }
 
-    // show grid menu: Export to Excel
-    if (this.gridOptions && this.gridOptions.enableExcelExport && this._addonOptions && !this._addonOptions.hideExportExcelCommand) {
-      const commandName = 'export-excel';
-      if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-        gridMenuCommandItems.push(
-          {
+      // show grid menu: Export to Excel
+      if (this.gridOptions.enableExcelExport && !this._addonOptions.hideExportExcelCommand) {
+        const commandName = 'export-excel';
+        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+          gridMenuCommandItems.push({
             iconCssClass: this._addonOptions.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
             titleKey: `${translationPrefix}${commandLabels?.exportExcelCommandKey ?? 'EXPORT_TO_EXCEL'}`,
             disabled: false,
             command: commandName,
-            positionOrder: 55
-          }
-        );
+            positionOrder: 56
+          });
+        }
       }
-    }
 
-    // show grid menu: export to text file as tab delimited
-    if (this.gridOptions?.enableTextExport && this._addonOptions && !this._addonOptions.hideExportTextDelimitedCommand) {
-      const commandName = 'export-text-delimited';
-      if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
-        gridMenuCommandItems.push(
-          {
+      // show grid menu: export to text file as tab delimited
+      if (this.gridOptions.enableTextExport && !this._addonOptions.hideExportTextDelimitedCommand) {
+        const commandName = 'export-text-delimited';
+        if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
+          gridMenuCommandItems.push({
             iconCssClass: this._addonOptions.iconExportTextDelimitedCommand || 'fa fa-download',
             titleKey: `${translationPrefix}${commandLabels?.exportTextDelimitedCommandKey ?? 'EXPORT_TO_TAB_DELIMITED'}`,
             disabled: false,
             command: commandName,
-            positionOrder: 56
-          }
-        );
+            positionOrder: 57
+          });
+        }
       }
-    }
 
-    // add the custom "Commands" title if there are any commands
-    const commandItems = this._addonOptions?.commandItems || [];
-    if (this.gridOptions && this._addonOptions && (Array.isArray(gridMenuCommandItems) && gridMenuCommandItems.length > 0 || (Array.isArray(commandItems) && commandItems.length > 0))) {
-      this._addonOptions.commandTitle = this._addonOptions.commandTitle || this.extensionUtility.getPickerTitleOutputString('commandTitle', 'gridMenu');
+      // add the custom "Commands" title if there are any commands
+      const commandItems = this._addonOptions?.commandItems || [];
+      if ((Array.isArray(gridMenuCommandItems) && gridMenuCommandItems.length > 0 || (Array.isArray(commandItems) && commandItems.length > 0))) {
+        this._addonOptions.commandTitle = this._addonOptions.commandTitle || this.extensionUtility.getPickerTitleOutputString('commandTitle', 'gridMenu');
+      }
     }
 
     return gridMenuCommandItems;
@@ -797,6 +795,11 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
             console.error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };`);
           }
           break;
+        case 'toggle-dark-mode':
+          const currentDarkMode = this.sharedService.gridOptions.darkMode;
+          this.grid.setOptions({ darkMode: !currentDarkMode });
+          this.sharedService.gridOptions.darkMode = !currentDarkMode;
+          break;
         case 'toggle-filter':
           let showHeaderRow = this.gridOptions?.showHeaderRow ?? false;
           showHeaderRow = !showHeaderRow; // inverse show header flag