Color scheme switch

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

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/administrator/templates/atum/component.php b/administrator/templates/atum/component.php
@@ -10,11 +10,13 @@
 
 defined('_JEXEC') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\HTML\HTMLHelper;
 
 /** @var \Joomla\CMS\Document\HtmlDocument $this */
 
-$wa = $this->getWebAssetManager();
+$app = Factory::getApplication();
+$wa  = $this->getWebAssetManager();
 
 // Get the hue value
 preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$#i', $this->params->get('hue', 'hsl(214, 63%, 20%)'), $matches);
@@ -47,10 +49,14 @@
 $this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
 $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
 
+$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] ?? '') : '');
 ?>
 
 <!DOCTYPE html>
-<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
+<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"<?php echo $themeModeAttr; ?>>
 <head>
     <jdoc:include type="metas" />
     <jdoc:include type="styles" />

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
@@ -19,15 +19,17 @@ body {
   &.admin {
     background-color: var(--template-bg-dark-5);
   }
+}
 
-  @if $enable-dark-mode {
-    @include color-mode(dark) {
-      &.admin {
-        background-color: var(--template-bg-dark-90);
-      }
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body.admin {
+      background-color: var(--template-bg-dark-90);
     }
   }
+}
 
+body {
   &.monochrome {
     filter: grayscale(1);
     &::after {