Implement Dark Mode (CFM-239) (#94)

* First commit for Dark Mode: enable dark mode toggle and OS system checking; rename all color variables; add color-scheme meta tag to all layouts. (CFM-239) * Clean-up more styles for dark mode. (CFM-239) * Fine-tune color contrasts for dark mode. (CFM-239) * Add comments for future development (concerning dark mode and select2) (CFM-239) * Trivial fix (color variable name change) post-rebase and addition of introductory dashboard message to lang files. (CFM-239)
COmanage · Jun 13, 2023 · 50b430b · 50b430b
1 parent 206d440
commit 50b430b
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 274 deletions.
diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
@@ -162,9 +162,27 @@ msgstr "Switch CO"
 msgid "menu.advanced"
 msgstr "Advanced Menu"
 
+msgid "menu.darkmode"
+msgstr "Dark mode"
+
+msgid "menu.density.small"
+msgstr "Density small"
+
+msgid "menu.density.medium"
+msgstr "Density medium"
+
+msgid "menu.density.large"
+msgstr "Density large"
+
+msgid "menu.introduction"
+msgstr "Please select an action from the menu."
+
 msgid "menu.main"
 msgstr "Main Menu"
 
+msgid "menu.settings"
+msgstr "Settings"
+
 msgid "menu.user"
 msgstr "User Menu"
 

diff --git a/app/templates/Dashboards/dashboard.php b/app/templates/Dashboards/dashboard.php
@@ -28,4 +28,6 @@
 // XXX This is a placeholder
 ?>
 
-Please select an action from the menu.
+<div id="introduction">
+  <p><?= __d('menu','menu.introduction') ?></p>
+</div>
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -154,13 +154,14 @@
     $("select").addClass("form-select");
 
     // Use select2 library everywhere except
+    // XXX TODO: Find a replacement for Select2 - it is not accessible.
     // - duet-date
-    $("select").not("#limit").not(".duet-date__select--month").not(".duet-date__select--year").select2({
-      width: '100%',
-      tags: true,
-      placeholder: "-- Select --",
-      allowClear: true
-    });
+    // $("select").not("#limit").not(".duet-date__select--month").not(".duet-date__select--year").select2({
+    //   width: '100%',
+    //   tags: true,
+    //   placeholder: "-- Select --",
+    //   allowClear: true
+    // });
 
     // Generic row click handling
     // First capture mouse location to test if we're clicking or drag-selecting (for copy)
@@ -252,6 +253,20 @@
 
     });
 
+    // SETTINGS (from User Menu)
+    // Dark Mode toggle
+    $("#dark-mode-toggle").click(function(e) {
+      e.preventDefault();
+      $('html').toggleClass('dark-mode');
+    });
+
+    // Test for dark mode OS preference, and add the 'dark-mode' body class by default if it is present.
+    // XXX TODO: Replace this with setting an application variable (when available) so we do not flash the light color briefly on each page load
+    const darkModeOsEnabled = window.matchMedia("(prefers-color-scheme: dark)");
+    if(darkModeOsEnabled.matches) {
+      $('html').addClass('dark-mode');
+    }
+
   });
 
   // Define default text for confirm dialog

diff --git a/app/templates/element/menuTop.php b/app/templates/element/menuTop.php
@@ -67,11 +67,11 @@ class="dropdown-toggle top-menu-button"
             Settings
           </a>
           <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">dark_mode</span> Dark mode</a></li>
+            <li><a class="dropdown-item nospin" href="#" id="dark-mode-toggle"><span class="material-icons" aria-hidden="true">dark_mode</span><?= __d('menu','menu.darkmode'); ?></a></li>
             <li><hr class="dropdown-divider"></li>
-            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">density_small</span>Density small</a></li>
-            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">density_medium</span>Density medium</a></li>
-            <li><a class="dropdown-item" href="#"><span class="material-icons" aria-hidden="true">density_large</span>Density large</a></li>
+            <li><a class="dropdown-item nospin" href="#"><span class="material-icons" aria-hidden="true">density_small</span><?= __d('menu','menu.density.small'); ?></a></li>
+            <li><a class="dropdown-item nospin" href="#"><span class="material-icons" aria-hidden="true">density_medium</span><?= __d('menu','menu.density.medium'); ?></a></li>
+            <li><a class="dropdown-item nospin" href="#"><span class="material-icons" aria-hidden="true">density_large</span><?= __d('menu','menu.density.large'); ?></a></li>
           </ul>
         </div>
         <?php if(count($vv_available_cos) > 1): // More than one CO is available, so present the switch button ?>

diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
@@ -41,6 +41,7 @@
 <html lang="<?= __('registry.meta.lang'); ?>">
   <head>
     <?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1.0') . PHP_EOL ?>
+    <?= $this->Html->meta('color-scheme', 'light dark') . PHP_EOL ?>
     <?= $this->Html->charset(); ?>
 
     <title><?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?></title>

diff --git a/app/templates/layout/error.php b/app/templates/layout/error.php
@@ -41,6 +41,7 @@
 <html lang="<?= __('registry.meta.lang'); ?>">
   <head>
     <?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1.0') . PHP_EOL ?>
+    <?= $this->Html->meta('color-scheme', 'light dark') . PHP_EOL ?>
     <?= $this->Html->charset() ?>
 
     <title><?= $this->fetch('title') ?></title>

diff --git a/app/templates/layout/iframe.php b/app/templates/layout/iframe.php
@@ -41,6 +41,7 @@
 <html lang="<?= __('registry.meta.lang'); ?>">
   <head>
     <?= $this->Html->meta('viewport', 'width=device-width, initial-scale=1.0') . PHP_EOL ?>
+    <?= $this->Html->meta('color-scheme', 'light dark') . PHP_EOL ?>
     <?= $this->Html->charset(); ?>
 
     <title><?= (!empty($vv_title) ? $vv_title : __('registry.meta.registry')); ?></title>