Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[5.x] Template color scheme configuration #475

Closed
joomlapl-bot opened this issue Mar 12, 2024 · 1 comment
Closed

[5.x] Template color scheme configuration #475

joomlapl-bot opened this issue Mar 12, 2024 · 1 comment
Assignees
@wojsmol @zwiastunsw
Labels
Joomla! 5.1 zmiany upstream
Milestone
5.1.0.1

Comments

@joomlapl-bot
Copy link
Collaborator

PR w związku ze zmianą oryginału joomla/joomla-cms#42221 Poniżej zmiany w oryginale:

Click to expand the diff! 
diff --git a/administrator/components/com_users/forms/user.xml b/administrator/components/com_users/forms/user.xml
index 1608607dc9554..9ed4ed6f24a8b 100644
--- a/administrator/components/com_users/forms/user.xml
+++ b/administrator/components/com_users/forms/user.xml
@@ -187,6 +187,19 @@
 				<option value="">JOPTION_USE_DEFAULT</option>
 			</field>
 
+			<field
+				name="colorScheme"
+				type="list"
+				label="COM_USERS_USER_COLORSCHEME_LABEL"
+				default=""
+				validate="options"
+				>
+				<option value="">JOPTION_USE_DEFAULT</option>
+				<option value="os">COM_USERS_USER_COLORSCHEME_OPTION_FOLLOW_OS</option>
+				<option value="light">COM_USERS_USER_COLORSCHEME_OPTION_LIGHT</option>
+				<option value="dark">COM_USERS_USER_COLORSCHEME_OPTION_DARK</option>
+			</field>
+
 		</fieldset>
 		<!-- User accessibility settings -->
 		<fieldset
diff --git a/administrator/language/en-GB/com_users.ini b/administrator/language/en-GB/com_users.ini
index 723b24fe7a63b..16f622a8c5871 100644
--- a/administrator/language/en-GB/com_users.ini
+++ b/administrator/language/en-GB/com_users.ini
@@ -399,6 +399,10 @@ COM_USERS_USER_BACKUPCODES_CAPTIVE_PROMPT="If you do not have access to your usu
 COM_USERS_USER_BACKUPCODES_DESC="Lets you access the site if all other Multi-factor Authentication methods you have set up fail."
 COM_USERS_USER_BATCH_FAILED="An error was encountered while performing the batch operation: %s."
 COM_USERS_USER_BATCH_SUCCESS="Batch operation completed."
+COM_USERS_USER_COLORSCHEME_LABEL="Dark Mode"
+COM_USERS_USER_COLORSCHEME_OPTION_DARK="Use Dark color scheme"
+COM_USERS_USER_COLORSCHEME_OPTION_FOLLOW_OS="Follow OS settings"
+COM_USERS_USER_COLORSCHEME_OPTION_LIGHT="Use Light color scheme"
 COM_USERS_USER_FIELD_BACKEND_LANGUAGE_LABEL="Backend Language"
 COM_USERS_USER_FIELD_BACKEND_TEMPLATE_LABEL="Backend Template Style"
 COM_USERS_USER_FIELD_BLOCK="Blocked"
diff --git a/administrator/language/en-GB/mod_user.ini b/administrator/language/en-GB/mod_user.ini
index 16ccdf2eaa2d2..c68f66b4005ac 100644
--- a/administrator/language/en-GB/mod_user.ini
+++ b/administrator/language/en-GB/mod_user.ini
@@ -8,4 +8,6 @@ MOD_USER_ACCESSIBILITY_SETTINGS="Accessibility Settings"
 MOD_USER_EDIT_ACCOUNT="Edit Account"
 MOD_USER_MENU="User Menu"
 MOD_USER_TITLE="Signed in as %s"
+MOD_USER_LIGHT_MODE="Light Mode"
+MOD_USER_DARK_MODE="Dark Mode"
 MOD_USER_XML_DESCRIPTION="This module shows the User Menu and is intended to be displayed in the 'status' position."
diff --git a/administrator/language/en-GB/tpl_atum.ini b/administrator/language/en-GB/tpl_atum.ini
index 99f5348503dea..0cf1c38ac75bd 100644
--- 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 color scheme"
+TPL_ATUM_COLORSCHEME_OPTION_FOLLOW_OS="Follow OS settings"
+TPL_ATUM_COLORSCHEME_OPTION_LIGHT="Use Light color scheme"
 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/modules/mod_user/tmpl/default.php b/administrator/modules/mod_user/tmpl/default.php
index e72715932e44f..a6e6cec978812 100644
--- a/administrator/modules/mod_user/tmpl/default.php
+++ b/administrator/modules/mod_user/tmpl/default.php
@@ -22,12 +22,16 @@
     return;
 }
 
+$tParams           = $app->getTemplate(true)->params;
+// Not all templates support a colorScheme
+$colorSchemeSwitch = !!$tParams->get('colorScheme');
+
 // Load the Bootstrap Dropdown
 HTMLHelper::_('bootstrap.dropdown', '.dropdown-toggle');
 ?>
 <div class="header-item-content dropdown header-profile">
     <button class="dropdown-toggle d-flex align-items-center ps-0 py-0" data-bs-toggle="dropdown" type="button"
-        title="<?php echo Text::_('MOD_USER_MENU'); ?>">
+    data-bs-auto-close="outside" title="<?php echo Text::_('MOD_USER_MENU'); ?>">
         <span class="header-item-icon">
             <span class="icon-user-circle" aria-hidden="true"></span>
         </span>
@@ -47,6 +51,16 @@
             <span class="icon-user icon-fw" aria-hidden="true"></span>
             <?php echo Text::_('MOD_USER_EDIT_ACCOUNT'); ?>
         </a>
+        <?php if ($colorSchemeSwitch) : ?>
+            <button type="button" class="dropdown-item" data-color-scheme-switch>
+                <span class="d-dark-scheme-none">
+                    <span class="fa fa-sun icon-fw me-2" aria-hidden="true"></span> <?php echo Text::_('MOD_USER_LIGHT_MODE'); ?>
+                </span>
+                <span class="d-light-scheme-none">
+                    <span class="fa fa-moon icon-fw me-2" aria-hidden="true"></span> <?php echo Text::_('MOD_USER_DARK_MODE'); ?>
+                </span>
+            </button>
+        <?php endif; ?>
         <?php $route = 'index.php?option=com_users&task=user.edit&id=' . $user->id . '&return=' . base64_encode($uri) . '#attrib-accessibility'; ?>
         <a class="dropdown-item" href="<?php echo Route::_($route); ?>">
             <span class="icon-universal-access icon-fw" aria-hidden="true"></span>
diff --git a/administrator/templates/atum/component.php b/administrator/templates/atum/component.php
index daedd4ba0addb..dd9aa21b45c14 100644
--- 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);
@@ -54,10 +56,26 @@
 $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']);
 
+$colorScheme   = $this->params->get('colorScheme', 'os');
+$themeModeAttr = '';
+
+if ($colorScheme) {
+    $themeModes   = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+    // Check for User choose, for now this have a priority over the parameters
+    $userColorScheme = $app->getInput()->cookie->get('userColorScheme', '');
+    if ($userColorScheme && !empty($themeModes[$userColorScheme])) {
+        $themeModeAttr = $themeModes[$userColorScheme];
+    } else {
+        // Check parameters first (User and Template), then look if we have detected the OS color scheme (if it set to 'os')
+        $colorScheme   = $app->getIdentity()->getParam('colorScheme', $colorScheme);
+        $osColorScheme = $colorScheme === 'os' ? $app->getInput()->cookie->get('osColorScheme', '') : '';
+        $themeModeAttr = ($themeModes[$colorScheme] ?? '') . ($themeModes[$osColorScheme] ?? '');
+    }
+}
 ?>
 
 <!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/administrator/templates/atum/error_full.php b/administrator/templates/atum/error_full.php
index 66170ca1936a1..cb018d763c1fe 100644
--- a/administrator/templates/atum/error_full.php
+++ b/administrator/templates/atum/error_full.php
@@ -77,13 +77,29 @@
 // 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');
+    $colorScheme   = $this->params->get('colorScheme', 'os');
+    $themeModeAttr = '';
+
+    if ($colorScheme) {
+        $themeModes   = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+        // Check for User choose, for now this have a priority over the parameters
+        $userColorScheme = $app->getInput()->cookie->get('userColorScheme', '');
+        if ($userColorScheme && !empty($themeModes[$userColorScheme])) {
+            $themeModeAttr = $themeModes[$userColorScheme];
+        } else {
+            // Check parameters first (User and Template), then look if we have detected the OS color scheme (if it set to 'os')
+            $colorScheme   = $app->getIdentity()->getParam('colorScheme', $colorScheme);
+            $osColorScheme = $colorScheme === 'os' ? $app->getInput()->cookie->get('osColorScheme', '') : '';
+            $themeModeAttr = ($themeModes[$colorScheme] ?? '') . ($themeModes[$osColorScheme] ?? '');
+        }
+    }
 
 // @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; ?>">
+<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/administrator/templates/atum/error_login.php b/administrator/templates/atum/error_login.php
index 417ff6d9edc34..1ad144b9d5ad3 100644
--- a/administrator/templates/atum/error_login.php
+++ b/administrator/templates/atum/error_login.php
@@ -81,13 +81,29 @@
 // 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');
+$colorScheme   = $this->params->get('colorScheme', 'os');
+$themeModeAttr = '';
+
+if ($colorScheme) {
+    $themeModes   = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+    // Check for User choose, for now this have a priority over the parameters
+    $userLastMode = $app->getInput()->cookie->get('userColorScheme', '');
+    if ($userLastMode && !empty($themeModes[$userLastMode])) {
+        $themeModeAttr = $themeModes[$userLastMode];
+    } else {
+        // Check parameters first (User and Template), then look if we have detected the OS color scheme (if it set to 'os')
+        $colorScheme   = $app->getIdentity()->getParam('colorScheme', $colorScheme);
+        $lastMode      = $colorScheme === 'os' ? $app->getInput()->cookie->get('osColorScheme', '') : '';
+        $themeModeAttr = ($colorScheme === 'os' ? $themeModes['os'] : '') . ($themeModes[$lastMode] ?? '');
+    }
+}
 
 // @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; ?>">
+<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/administrator/templates/atum/index.php b/administrator/templates/atum/index.php
index 03d6696c0994a..18c96fed70aeb 100644
--- a/administrator/templates/atum/index.php
+++ b/administrator/templates/atum/index.php
@@ -92,7 +92,7 @@ function adjustColorLightness($r, $g, $b, $percent)
 		--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 . ';
         --link-color-rgb-hvr: ' . $linkColorDarkHvr . ';
@@ -105,7 +105,23 @@ function adjustColorLightness($r, $g, $b, $percent)
 // 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');
+$colorScheme   = $this->params->get('colorScheme', 'os');
+$themeModeAttr = '';
+
+if ($colorScheme) {
+    $themeModes   = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+    // Check for User choose, for now this have a priority over the parameters
+    $userColorScheme = $app->getInput()->cookie->get('userColorScheme', '');
+    if ($userColorScheme && !empty($themeModes[$userColorScheme])) {
+        $themeModeAttr = $themeModes[$userColorScheme];
+    } else {
+        // Check parameters first (User and Template), then look if we have detected the OS color scheme (if it set to 'os')
+        $colorScheme   = $app->getIdentity()->getParam('colorScheme', $colorScheme);
+        $osColorScheme = $colorScheme === 'os' ? $app->getInput()->cookie->get('osColorScheme', '') : '';
+        $themeModeAttr = ($themeModes[$colorScheme] ?? '') . ($themeModes[$osColorScheme] ?? '');
+    }
+}
 
 Text::script('TPL_ATUM_MORE_ELEMENTS');
 
@@ -113,14 +129,14 @@ function adjustColorLightness($r, $g, $b, $percent)
 $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" />
     <jdoc:include type="scripts" />
 </head>
 
-<body data-color-scheme-os class="admin <?php echo $option . ' view-' . $view . ' layout-' . $layout . ($task ? ' task-' . $task : '') . ($monochrome || $a11y_mono ? ' monochrome' : '') . ($a11y_contrast ? ' a11y_contrast' : '') . ($a11y_highlight ? ' a11y_highlight' : ''); ?>">
+<body class="admin <?php echo $option . ' view-' . $view . ' layout-' . $layout . ($task ? ' task-' . $task : '') . ($monochrome || $a11y_mono ? ' monochrome' : '') . ($a11y_contrast ? ' a11y_contrast' : '') . ($a11y_highlight ? ' a11y_highlight' : ''); ?>">
 <noscript>
     <div class="alert alert-danger" role="alert">
         <?php echo Text::_('JGLOBAL_WARNJAVASCRIPT'); ?>
diff --git a/administrator/templates/atum/login.php b/administrator/templates/atum/login.php
index 719a1e71e2a9d..8e3700d8885b2 100644
--- a/administrator/templates/atum/login.php
+++ b/administrator/templates/atum/login.php
@@ -75,7 +75,23 @@
 // 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');
+$colorScheme   = $this->params->get('colorScheme', 'os');
+$themeModeAttr = '';
+
+if ($colorScheme) {
+    $themeModes   = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
+    // Check for User choose, for now this have a priority over the parameters
+    $userColorScheme = $app->getInput()->cookie->get('userColorScheme', '');
+    if ($userColorScheme && !empty($themeModes[$userColorScheme])) {
+        $themeModeAttr = $themeModes[$userColorScheme];
+    } else {
+        // Check parameters first (User and Template), then look if we have detected the OS color scheme (if it set to 'os')
+        $colorScheme   = $app->getIdentity()->getParam('colorScheme', $colorScheme);
+        $osColorScheme = $colorScheme === 'os' ? $app->getInput()->cookie->get('osColorScheme', '') : '';
+        $themeModeAttr = ($themeModes[$colorScheme] ?? '') . ($themeModes[$osColorScheme] ?? '');
+    }
+}
 
 // Add cookie alert message
 Text::script('JGLOBAL_WARNCOOKIES');
@@ -87,7 +103,7 @@
 
 ?>
 <!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/administrator/templates/atum/templateDetails.xml b/administrator/templates/atum/templateDetails.xml
index d52030113b113..d4ec535fdf700 100644
--- a/administrator/templates/atum/templateDetails.xml
+++ b/administrator/templates/atum/templateDetails.xml
@@ -111,6 +111,18 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
+				<field
+					name="colorScheme"
+					type="list"
+					label="TPL_ATUM_COLORSCHEME_LABEL"
+					default="os"
+					validate="options"
+					>
+					<option value="0">JDISABLED</option>
+					<option value="os">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/plg_editors_codemirror/js/codemirror.es6.js b/build/media_source/plg_editors_codemirror/js/codemirror.es6.js
index 0d06c56a85386..2fb8b5a8f4c26 100644
--- a/build/media_source/plg_editors_codemirror/js/codemirror.es6.js
+++ b/build/media_source/plg_editors_codemirror/js/codemirror.es6.js
@@ -105,8 +105,10 @@ const optionsToExtensions = async (options) => {
   readOnly.$j_name = 'readOnly';
   extensions.push(readOnly.of(EditorState.readOnly.of(!!options.readOnly)));
 
+  // Check for a skin that suits best for the active color scheme
   // TODO: Use compartments to update on change of dark mode like: https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709
-  if ('colorSchemeOs' in document.body.dataset && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  if (('colorSchemeOs' in document.documentElement.dataset && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    || document.documentElement.dataset.colorScheme === 'dark') {
     extensions.push(oneDark);
   }
 
diff --git a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js
index 235effdd9d785..4d00768df7079 100644
--- a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js
+++ b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js
@@ -155,17 +155,21 @@ Joomla.JoomlaTinyMCE = {
       options.target = element;
     }
 
+    // Check for a skin that suits best for the active color scheme
     const skinLight = options.skin_light;
     const skinDark = options.skin_dark;
-
-    if ('colorSchemeOs' in document.body.dataset) {
-      options.skin = (window.matchMedia('(prefers-color-scheme: dark)').matches ? skinDark : skinLight);
-    } else {
-      options.skin = skinLight;
-    }
-
     delete options.skin_light;
     delete options.skin_dark;
+    // Set light as default
+    options.skin = skinLight;
+
+    // For templates with OS preferred color scheme
+    if ('colorSchemeOs' in document.documentElement.dataset) {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      options.skin = mql.matches ? skinDark : skinLight;
+    } else if (document.documentElement.dataset.colorScheme === 'dark') {
+      options.skin = skinDark;
+    }
 
     // Ensure tinymce is initialised in readonly mode if the textarea has readonly applied
     let readOnlyMode = false;
diff --git a/build/media_source/templates/administrator/atum/js/template.es6.js b/build/media_source/templates/administrator/atum/js/template.es6.js
index 23a4cb1b6086c..b8c4540863e26 100644
--- 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,51 @@ function subheadScrolling() {
   }
 }
 
+/**
+ * Watch for Dark mode changes
+ *
+ * @since   __DEPLOY_VERSION__
+ */
+function darkModeWatch() {
+  const docEl = document.documentElement;
+  // Update data-bs-theme when scheme has been changed
+  document.addEventListener('joomla:color-scheme-change', () => {
+    docEl.dataset.bsTheme = docEl.dataset.colorScheme;
+  });
+
+  // Look for User choose with data-color-scheme-switch button
+  const buttons = document.querySelectorAll('button[data-color-scheme-switch]');
+  buttons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      const { colorScheme } = docEl.dataset;
+      const newScheme = colorScheme !== 'dark' ? 'dark' : 'light';
+      docEl.dataset.colorScheme = newScheme;
+      document.cookie = `userColorScheme=${newScheme};`;
+      document.dispatchEvent(new CustomEvent('joomla:color-scheme-change', { bubbles: true }));
+    });
+  });
+
+  // Look for data-color-scheme-os attribute
+  const { colorSchemeOs } = docEl.dataset;
+  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;
+    docEl.dataset.colorScheme = newScheme;
+    // Store theme in cookies, so php will know the last choice
+    document.cookie = `osColorScheme=${newScheme};`;
+    document.dispatchEvent(new CustomEvent('joomla:color-scheme-change', { bubbles: true }));
+  };
+  mql.addEventListener('change', check);
+  check();
+}
+
 // Initialize
+darkModeWatch();
 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
index bf6b4ef4591a8..7125c202caf09 100644
--- a/build/media_source/templates/administrator/atum/scss/_variables.scss
+++ b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -1,8 +1,8 @@
 // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
 $prefix: "";
 
-// Use dark mode conditionally based on media queries from the browser to match the desktop theme
-$color-mode-type: media-query;
+// Use dark mode conditionally based on data-bs-theme attribute
+$color-mode-type: data;
 
 // Enable dark mode in J5.0
 $enable-dark-mode: true;
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_utilities.scss b/build/media_source/templates/administrator/atum/scss/blocks/_utilities.scss
index 6374fab8596d0..897f75e30db0f 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_utilities.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_utilities.scss
@@ -191,3 +191,15 @@
 .editor-xtd-buttons .btn {
   margin-bottom: 5px;
 }
+
+// Visibility depend from ColorScheme
+@include color-mode(dark) {
+  .d-dark-scheme-none {
+    display: none;
+  }
+}
+@include color-mode(light) {
+  .d-light-scheme-none {
+    display: none;
+  }
+}
diff --git a/components/com_users/forms/frontend.xml b/components/com_users/forms/frontend.xml
index 68a200ea5c627..95a4ec7d3aff1 100644
--- a/components/com_users/forms/frontend.xml
+++ b/components/com_users/forms/frontend.xml
@@ -31,6 +31,19 @@
 				>
 				<option value="">JOPTION_USE_DEFAULT</option>
 			</field>
+
+			<field
+				name="colorScheme"
+				type="list"
+				label="COM_USERS_USER_COLORSCHEME_LABEL"
+				default=""
+				validate="options"
+				>
+				<option value="">JOPTION_USE_DEFAULT</option>
+				<option value="os">COM_USERS_USER_COLORSCHEME_OPTION_FOLLOW_OS</option>
+				<option value="light">COM_USERS_USER_COLORSCHEME_OPTION_LIGHT</option>
+				<option value="dark">COM_USERS_USER_COLORSCHEME_OPTION_DARK</option>
+			</field>
 		</fieldset>
 	</fields>
 </form>
diff --git a/installation/sql/mysql/base.sql b/installation/sql/mysql/base.sql
index d6e168abcda62..871ae9ecf8e17 100644
--- a/installation/sql/mysql/base.sql
+++ b/installation/sql/mysql/base.sql
@@ -841,7 +841,7 @@ CREATE TABLE IF NOT EXISTS `#__template_styles` (
 --
 
 INSERT INTO `#__template_styles` (`id`, `template`, `client_id`, `home`, `title`, `inheritable`, `parent`, `params`) VALUES
-(10, 'atum', 1, '1', 'Atum - Default', 1, '', '{"hue":"hsl(214, 63%, 20%)","bg-light":"#f0f4fb","text-dark":"#495057","text-light":"#ffffff","link-color":"#2a69b8","special-color":"#001b4c","monochrome":"0","loginLogo":"","loginLogoAlt":"","logoBrandLarge":"","logoBrandLargeAlt":"","logoBrandSmall":"","logoBrandSmallAlt":""}'),
+(10, 'atum', 1, '1', 'Atum - Default', 1, '', '{"hue":"hsl(214, 63%, 20%)","bg-light":"#f0f4fb","text-dark":"#495057","text-light":"#ffffff","link-color":"#2a69b8","special-color":"#001b4c","colorScheme":"os","monochrome":"0","loginLogo":"","loginLogoAlt":"","logoBrandLarge":"","logoBrandLargeAlt":"","logoBrandSmall":"","logoBrandSmallAlt":""}'),
 (11, 'cassiopeia', 0, '1', 'Cassiopeia - Default', 1, '', '{"brand":"1","logoFile":"","siteTitle":"","siteDescription":"","useFontScheme":"0","colorName":"colors_standard","fluidContainer":"0","stickyHeader":0,"backTop":0}');
 
 -- --------------------------------------------------------
diff --git a/installation/sql/postgresql/base.sql b/installation/sql/postgresql/base.sql
index d8dcbde5ec80b..bb30f0950f263 100644
--- a/installation/sql/postgresql/base.sql
+++ b/installation/sql/postgresql/base.sql
@@ -856,7 +856,7 @@ CREATE INDEX "#__template_styles_idx_client_id_home" ON "#__template_styles" ("c
 -- Dumping data for table `#__template_styles`
 --
 INSERT INTO "#__template_styles" ("id", "template", "client_id", "home", "title", "inheritable", "parent", "params") VALUES
-(10, 'atum', 1, '1', 'Atum - Default', 1, '', '{"hue":"hsl(214, 63%, 20%)","bg-light":"#f0f4fb","text-dark":"#495057","text-light":"#ffffff","link-color":"#2a69b8","special-color":"#001b4c","monochrome":"0","loginLogo":"","loginLogoAlt":"","logoBrandLarge":"","logoBrandLargeAlt":"","logoBrandSmall":"","logoBrandSmallAlt":""}'),
+(10, 'atum', 1, '1', 'Atum - Default', 1, '', '{"hue":"hsl(214, 63%, 20%)","bg-light":"#f0f4fb","text-dark":"#495057","text-light":"#ffffff","link-color":"#2a69b8","special-color":"#001b4c","colorScheme":"os","monochrome":"0","loginLogo":"","loginLogoAlt":"","logoBrandLarge":"","logoBrandLargeAlt":"","logoBrandSmall":"","logoBrandSmallAlt":""}'),
 (11, 'cassiopeia', 0, '1', 'Cassiopeia - Default', 1, '', '{"brand":"1","logoFile":"","siteTitle":"","siteDescription":"","useFontScheme":"0","colorName":"colors_standard","fluidContainer":"0","stickyHeader":0,"backTop":0}');
 
 SELECT setval('#__template_styles_id_seq', 12, false);
diff --git a/language/en-GB/com_users.ini b/language/en-GB/com_users.ini
index 1e1d270d6d75d..6878e13fce773 100644
--- a/language/en-GB/com_users.ini
+++ b/language/en-GB/com_users.ini
@@ -145,6 +145,10 @@ COM_USERS_USER_BACKUPCODES="Backup Codes"
 COM_USERS_USER_BACKUPCODES_CAPTIVE_PROMPT="If you do not have access to your usual Multi-factor Authentication method use any of your Backup Codes in the field below. Please remember that this emergency backup code cannot be reused."
 COM_USERS_USER_BACKUPCODES_DESC="If you do not have access to your Multi-factor Authentication device you can use any of the following passwords instead of a regular security code. Each one of these emergency codes is immediately destroyed upon use. We recommend printing these codes out and keeping the printout in a safe and accessible location, eg your wallet or a safety deposit box."
 COM_USERS_USER_BLOCKED="This user is blocked. If this is an error, please contact an administrator."
+COM_USERS_USER_COLORSCHEME_LABEL="Dark Mode"
+COM_USERS_USER_COLORSCHEME_OPTION_DARK="Use Dark color scheme"
+COM_USERS_USER_COLORSCHEME_OPTION_FOLLOW_OS="Follow OS settings"
+COM_USERS_USER_COLORSCHEME_OPTION_LIGHT="Use Light color scheme"
 COM_USERS_USER_FIELD_BACKEND_LANGUAGE_LABEL="Backend Language"
 COM_USERS_USER_FIELD_BACKEND_TEMPLATE_LABEL="Backend Template Style"
 COM_USERS_USER_FIELD_EDITOR_LABEL="Editor"
@artur-stepien artur-stepien modified the milestones: 5.0.3.2, 5.1.0.1 Mar 29, 2024
@zwiastunsw
Copy link
Contributor

rozwiązane 5.0.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wojsmol wojsmol

@zwiastunsw zwiastunsw

Labels
Joomla! 5.1 zmiany upstream
Projects
None yet
Milestone
5.1.0.1
Development

No branches or pull requests
4 participants
@artur-stepien @wojsmol @zwiastunsw @joomlapl-bot