First commit for Dark Mode: enable dark mode toggle and OS system che…

…cking; rename all color variables; add color-scheme meta tag to all layouts. (CFM-239)
COmanage · Jun 12, 2023 · b4d5fdf · b4d5fdf
1 parent b195b17
commit b4d5fdf
Show file tree

Hide file tree

Showing 9 changed files with 295 additions and 252 deletions.
diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
@@ -141,6 +141,21 @@ msgstr "All Groups"
 msgid "co.switch"
 msgstr "Switch CO"
 
+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.settings"
+msgstr "Settings"
+
 msgid "menu.user"
 msgstr "User Menu"
 

diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -252,6 +252,19 @@
 
     });
 
+    // 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.
+    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>