Skip to content

Commit

Permalink
Merge pull request #11 from bembelimen/Fedir/dark-mode/switch
Browse files Browse the repository at this point in the history
Dark Mode switch module
  • Loading branch information
Fedik committed Jan 28, 2024
2 parents c3ef672 + ca00d2e commit 7b18960
Show file tree
Hide file tree
Showing 18 changed files with 191 additions and 31 deletions.
13 changes: 13 additions & 0 deletions administrator/components/com_users/forms/user.xml
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,19 @@
<option value="">JOPTION_USE_DEFAULT</option>
</field>

<field
name="colorScheme"
type="list"
label="COM_USERS_USER_COLORSCHEME_LABEL"
default=""
filter="options"
>
<option value="">JOPTION_USE_DEFAULT</option>
<option value="0">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
Expand Down
4 changes: 4 additions & 0 deletions administrator/language/en-GB/com_users.ini
Original file line number Diff line number Diff line change
Expand Up @@ -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 theme"
COM_USERS_USER_COLORSCHEME_OPTION_FOLLOW_OS="Follow OS settings"
COM_USERS_USER_COLORSCHEME_OPTION_LIGHT="Use Light theme"
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"
Expand Down
2 changes: 2 additions & 0 deletions administrator/language/en-GB/mod_user.ini
Original file line number Diff line number Diff line change
Expand Up @@ -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."
23 changes: 22 additions & 1 deletion administrator/modules/mod_user/tmpl/default.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
Expand All @@ -22,12 +23,21 @@
return;
}

$app = Factory::getApplication();

$tParams = $app->getTemplate(true)->params;

$document = $app->getDocument();
$wa = $document->getWebAssetManager();
$wa->getRegistry()->addExtensionRegistryFile('mod_user');
$wa->usePreset('mod_user.color-scheme');

// 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>
Expand All @@ -47,6 +57,17 @@
<span class="icon-user icon-fw" aria-hidden="true"></span>
<?php echo Text::_('MOD_USER_EDIT_ACCOUNT'); ?>
</a>
<?php // Not all templates support a colorScheme ?>
<?php if ($tParams->get('colorScheme')) : ?>
<button type="button" class="dropdown-item mod_user-colorScheme">
<span class="mod_user-colorScheme-light">
<span class="fa fa-sun icon-fw me-2" aria-hidden="true"></span> <?php echo Text::_('MOD_USER_LIGHT_MODE'); ?>
</span>
<span class="mod_user-colorScheme-dark">
<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>
Expand Down
8 changes: 4 additions & 4 deletions administrator/templates/atum/component.php
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@
$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] ?? '') : '');
$darkMode = $app->getIdentity()->getParam('colorScheme', $this->params->get('colorScheme', 'os'));
$lastMode = $app->getInput()->cookie->get('colorScheme', $darkMode);
$themeModes = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
$themeModeAttr = $themeModes[$lastMode] ?? '';
?>

<!DOCTYPE html>
Expand Down
7 changes: 3 additions & 4 deletions administrator/templates/atum/error_full.php
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,9 @@
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$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] ?? '') : '');
$darkMode = $app->getIdentity()->getParam('colorScheme', $this->params->get('colorScheme', 'os'));
$lastMode = $app->getInput()->cookie->get('colorScheme', $darkMode);
$themeModes = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];

// @see administrator/templates/atum/html/layouts/status.php
$statusModules = LayoutHelper::render('status', ['modules' => 'status']);
Expand Down
8 changes: 4 additions & 4 deletions administrator/templates/atum/error_login.php
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$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] ?? '') : '');
$darkMode = $app->getIdentity()->getParam('colorScheme', $this->params->get('colorScheme', 'os'));
$lastMode = $app->getInput()->cookie->get('colorScheme', $darkMode);
$themeModes = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
$themeModeAttr = $themeModes[$lastMode] ?? '';

// @see administrator/templates/atum/html/layouts/status.php
$statusModules = LayoutHelper::render('status', ['modules' => 'status']);
Expand Down
10 changes: 5 additions & 5 deletions administrator/templates/atum/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,10 @@
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$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] ?? '') : '');
$darkMode = $app->getIdentity()->getParam('colorScheme', $this->params->get('colorScheme'));
$lastMode = $app->getInput()->cookie->get('colorScheme', $darkMode);
$themeModes = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
$themeModeAttr = $themeModes[$lastMode] ?? '';

Text::script('TPL_ATUM_MORE_ELEMENTS');

Expand All @@ -110,7 +110,7 @@
<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'); ?>
Expand Down
10 changes: 5 additions & 5 deletions administrator/templates/atum/login.php
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,10 @@
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

$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] ?? '') : '');
$darkMode = $app->getIdentity()->getParam('colorScheme', $this->params->get('colorScheme', 'os'));
$lastMode = $app->getInput()->cookie->get('colorScheme', $darkMode);
$themeModes = ['os' => ' data-color-scheme-os', 'light' => ' data-bs-theme="light" data-color-scheme="light"', 'dark' => ' data-bs-theme="dark" data-color-scheme="dark"'];
$themeModeAttr = $themeModes[$lastMode] ?? '';

// Add cookie alert message
Text::script('JGLOBAL_WARNCOOKIES');
Expand All @@ -91,7 +91,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" />
Expand Down
5 changes: 3 additions & 2 deletions administrator/templates/atum/templateDetails.xml
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,10 @@
name="colorScheme"
type="list"
label="TPL_ATUM_COLORSCHEME_LABEL"
default="0"
default="os"
>
<option value="0">TPL_ATUM_COLORSCHEME_OPTION_FOLLOW_OS</option>
<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>
Expand Down
33 changes: 33 additions & 0 deletions build/media_source/mod_user/joomla.asset.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
"name": "mod_user",
"version": "5.0.0",
"description": "Joomla CMS",
"license": "GPL-2.0-or-later",
"assets": [
{
"name": "mod_user.color-scheme",
"type": "style",
"uri": "mod_user/color-scheme.min.css"
},
{
"name": "mod_user.color-scheme",
"type": "script",
"uri": "mod_user/color-scheme.min.js",
"dependencies": [
"core"
],
"attributes": {
"type": "module"
}
},
{
"name": "mod_user.color-scheme",
"type": "preset",
"dependencies": [
"mod_user.color-scheme#style",
"mod_user.color-scheme#script"
]
}
]
}
42 changes: 42 additions & 0 deletions build/media_source/mod_user/js/color-scheme.es6.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/**
* @copyright (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
/**
* Every quickicon with an ajax request url loads data and set them into the counter element
* Also the data name is set as singular or plural.
* A SR-only text is added
* The class pulse gets 'warning', 'success' or 'error', depending on the retrieved data.
*/
if (!Joomla) {
throw new Error('Joomla API was not properly initialized');
}

const initModUser = () => {
const buttons = [].slice.call(document.querySelectorAll('.mod_user-colorScheme'));

console.log(window.document);

buttons.forEach(button => {
button.addEventListener('click', e => {
e.preventDefault();

const docEl = document.documentElement
const colorScheme = docEl.dataset.colorScheme;

const newScheme = colorScheme !== 'dark' ? 'dark' : 'light';

docEl.dataset.colorScheme = newScheme;
docEl.dataset.bsTheme = newScheme;

const expires = new Date();
expires.setTime(expires.getTime() + 31536000000);
document.cookie = `colorScheme=${newScheme}; expires=${expires.toUTCString()};`;
document.dispatchEvent(new CustomEvent('joomla:color-scheme-change', { bubbles: true }));

});
});

};

document.addEventListener('DOMContentLoaded', initModUser);
23 changes: 23 additions & 0 deletions build/media_source/mod_user/scss/color-scheme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.mod_user-colorScheme {
> span {
&.mod_user-colorScheme-dark {
display: none;
}
&.mod_user-colorScheme-light {
display: inline;
}
}
}

[data-color-scheme="dark"] {
.mod_user-colorScheme {
> span {
&.mod_user-colorScheme-dark {
display: inline;
}
&.mod_user-colorScheme-light {
display: none;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ function subheadScrolling() {
*
* @since __DEPLOY_VERSION__
*/
function dartModeWatch() {
function darkModeWatch() {
const docEl = document.documentElement;
const { colorSchemeOs } = docEl.dataset;
// Look for data-color-scheme-os attribute
Expand All @@ -239,15 +239,20 @@ function dartModeWatch() {
docEl.dataset.colorScheme = newScheme;
expires.setTime(expires.getTime() + 31536000000);
// Store theme in cookies, so php will know the last choice
document.cookie = `atumColorScheme=${newScheme}; expires=${expires.toUTCString()};`;
document.cookie = `colorScheme=${newScheme}; expires=${expires.toUTCString()};`;
document.dispatchEvent(new CustomEvent('joomla:color-scheme-change', { bubbles: true }));
};
mql.addEventListener('change', check);
check();

if (!document.cookie
.split("; ")
.find((row) => row.startsWith("colorScheme"))) {
check();
}
}

// Initialize
dartModeWatch();
darkModeWatch();
headerItemsInDropdown();
reactToResize();
subheadScrolling();
Expand Down
13 changes: 13 additions & 0 deletions components/com_users/forms/frontend.xml
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,19 @@
>
<option value="">JOPTION_USE_DEFAULT</option>
</field>

<field
name="colorScheme"
type="list"
label="COM_USERS_USER_COLORSCHEME_LABEL"
default=""
filter="options"
>
<option value="">JOPTION_USE_DEFAULT</option>
<option value="0">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>
2 changes: 1 addition & 1 deletion installation/sql/mysql/base.sql
Original file line number Diff line number Diff line change
Expand Up @@ -840,7 +840,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}');

-- --------------------------------------------------------
Expand Down
2 changes: 1 addition & 1 deletion installation/sql/postgresql/base.sql
Original file line number Diff line number Diff line change
Expand Up @@ -855,7 +855,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);
Expand Down
4 changes: 4 additions & 0 deletions language/en-GB/com_users.ini
Original file line number Diff line number Diff line change
Expand Up @@ -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 theme"
COM_USERS_USER_COLORSCHEME_OPTION_FOLLOW_OS="Follow OS settings"
COM_USERS_USER_COLORSCHEME_OPTION_LIGHT="Use Light theme"
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"
Expand Down

0 comments on commit 7b18960

Please sign in to comment.