Color scheme switch

joomla · Oct 26, 2023 · 995e3e0 · 995e3e0
1 parent 4c799de
commit 995e3e0
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 8 deletions.
diff --git a/administrator/language/en-GB/tpl_atum.ini b/administrator/language/en-GB/tpl_atum.ini
@@ -6,6 +6,10 @@
 ATUM="Atum Administrator template"
 TPL_ATUM_BACK_TO_CONTROL_PANEL="Back to Dashboard"
 TPL_ATUM_BACKEND_LOGIN="Joomla Administrator Login"
+TPL_ATUM_COLORSCHEME_LABEL="Dark mode"
+TPL_ATUM_COLORSCHEME_OPTION_DARK="Use Dark theme"
+TPL_ATUM_COLORSCHEME_OPTION_FOLLOW_OS="Follow OS settings"
+TPL_ATUM_COLORSCHEME_OPTION_LIGHT="Use Light theme"
 TPL_ATUM_COLORS_HUE="Choose your hue value for the dark template colour"
 TPL_ATUM_COLORS_SETTINGS_BG_LIGHT_LABEL="Light Background"
 TPL_ATUM_COLORS_SETTINGS_LABEL="Colour Settings"

diff --git a/administrator/templates/atum/error_full.php b/administrator/templates/atum/error_full.php
@@ -77,7 +77,11 @@
 // Set some meta data
     $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
 
-    $monochrome = (bool) $this->params->get('monochrome');
+    $monochrome    = (bool) $this->params->get('monochrome');
+    $darkMode      = $this->params->get('colorScheme', 0);
+    $lastMode      = !$darkMode ? $app->getInput()->cookie->get('atumColorScheme', '') : false;
+    $themeModes    = [0 => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+    $themeModeAttr = ($themeModes[$darkMode] ?? '') . ($lastMode ? ($themeModes[$lastMode] ?? '') : '');
 
 // @see administrator/templates/atum/html/layouts/status.php
     $statusModules = LayoutHelper::render('status', ['modules' => 'status']);

diff --git a/administrator/templates/atum/error_login.php b/administrator/templates/atum/error_login.php
@@ -81,7 +81,11 @@
 // Set some meta data
 $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
 
-$monochrome = (bool) $this->params->get('monochrome');
+$monochrome    = (bool) $this->params->get('monochrome');
+$darkMode      = $this->params->get('colorScheme', 0);
+$lastMode      = !$darkMode ? $app->getInput()->cookie->get('atumColorScheme', '') : false;
+$themeModes    = [0 => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+$themeModeAttr = ($themeModes[$darkMode] ?? '') . ($lastMode ? ($themeModes[$lastMode] ?? '') : '');
 
 // @see administrator/templates/atum/html/layouts/status.php
 $statusModules = LayoutHelper::render('status', ['modules' => 'status']);

diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php
@@ -80,26 +80,30 @@
 		--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
 		--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
 	}')
-    ->addInlineStyle('@media (prefers-color-scheme: dark) { :root {
+    ->addInlineStyle(':root[data-color-scheme="dark"] {
 		--link-color: ' . $linkColorDark . ';
 		--link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . ';
-	}}');
+	}');
 
 // Override 'template.active' asset to set correct ltr/rtl dependency
 $wa->registerStyle('template.active', '', [], [], ['template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
 
 // Set some meta data
 $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
 
-$monochrome = (bool) $this->params->get('monochrome');
+$monochrome    = (bool) $this->params->get('monochrome');
+$darkMode      = $this->params->get('colorScheme', 0);
+$lastMode      = !$darkMode ? $app->getInput()->cookie->get('atumColorScheme', '') : false;
+$themeModes    = [0 => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+$themeModeAttr = ($themeModes[$darkMode] ?? '') . ($lastMode ? ($themeModes[$lastMode] ?? '') : '');
 
 Text::script('TPL_ATUM_MORE_ELEMENTS');
 
 // @see administrator/templates/atum/html/layouts/status.php
 $statusModules = LayoutHelper::render('status', ['modules' => 'status']);
 ?>
 <!DOCTYPE html>
-<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"<?php echo $a11y_font ? ' class="a11y_font"' : ''; ?>>
+<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"<?php echo $a11y_font ? ' class="a11y_font"' : ''; ?><?php echo $themeModeAttr; ?>>
 <head>
     <jdoc:include type="metas" />
     <jdoc:include type="styles" />

diff --git a/administrator/templates/atum/login.php b/administrator/templates/atum/login.php
@@ -75,7 +75,11 @@
 // Set some meta data
 $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
 
-$monochrome = (bool) $this->params->get('monochrome');
+$monochrome    = (bool) $this->params->get('monochrome');
+$darkMode      = $this->params->get('colorScheme', 0);
+$lastMode      = !$darkMode ? $app->getInput()->cookie->get('atumColorScheme', '') : false;
+$themeModes    = [0 => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+$themeModeAttr = ($themeModes[$darkMode] ?? '') . ($lastMode ? ($themeModes[$lastMode] ?? '') : '');
 
 // Add cookie alert message
 Text::script('JGLOBAL_WARNCOOKIES');

diff --git a/administrator/templates/atum/templateDetails.xml b/administrator/templates/atum/templateDetails.xml
@@ -111,6 +111,16 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
+				<field
+					name="colorScheme"
+					type="list"
+					label="TPL_ATUM_COLORSCHEME_LABEL"
+					default="0"
+				>
+					<option value="0">TPL_ATUM_COLORSCHEME_OPTION_FOLLOW_OS</option>
+					<option value="light">TPL_ATUM_COLORSCHEME_OPTION_LIGHT</option>
+					<option value="dark">TPL_ATUM_COLORSCHEME_OPTION_DARK</option>
+				</field>
 			</fieldset>
 
 			<fieldset name="images" label="TPL_ATUM_IMAGE_SETTINGS_LABEL">

diff --git a/build/media_source/templates/administrator/atum/js/template.es6.js b/build/media_source/templates/administrator/atum/js/template.es6.js
@@ -218,7 +218,36 @@ function subheadScrolling() {
   }
 }
 
+/**
+ * Watch for Dark mode changes, when the template is configured to follow OS setting
+ *
+ * @since   __DEPLOY_VERSION__
+ */
+function dartModeWatch() {
+  const docEl = document.documentElement;
+  const { colorSchemeOs } = docEl.dataset;
+  // Look for data-color-scheme-os attribute
+  if (colorSchemeOs === undefined) return;
+  // Watch on media changes
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+  const check = () => {
+    const newScheme = mql.matches ? 'dark' : 'light';
+    // Check if theme already was set
+    if (docEl.dataset.colorScheme === newScheme) return;
+    const expires = new Date();
+    docEl.dataset.bsTheme = newScheme;
+    docEl.dataset.colorScheme = newScheme;
+    expires.setTime(expires.getTime() + 31536000000);
+    // Store theme in cookies, so php will know the last choose
+    document.cookie = `atumColorScheme=${newScheme}; expires=${expires.toUTCString()};`;
+    document.dispatchEvent(new CustomEvent('joomla:color-scheme-change', { bubbles: true }));
+  };
+  mql.addEventListener('change', check);
+  check();
+}
+
 // Initialize
+dartModeWatch();
 headerItemsInDropdown();
 reactToResize();
 subheadScrolling();

diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -2,7 +2,7 @@
 $prefix: "";
 
 // Use dark mode conditionally based on media queries from the browser to match the desktop theme
-$color-mode-type: media-query;
+$color-mode-type: data;
 
 // Variables
 $white:                            #fff;