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.0] Allow OS color scheme override #42209

Closed
wants to merge 5 commits into from
Closed

[5.0] Allow OS color scheme override #42209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c0aa44
Introduce the switches
dgrammatiko Oct 23, 2023
ec2353f
meh
dgrammatiko Oct 23, 2023
947caa2
Switch to tristate
dgrammatiko Oct 23, 2023
58dd55c
Update administrator/language/en-GB/com_users.ini
dgrammatiko Oct 23, 2023
9266723
Update administrator/language/en-GB/com_users.ini
dgrammatiko Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 22 additions & 0 deletions administrator/components/com_users/forms/user.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,28 @@
label="COM_USERS_A11Y_SETTINGS_FIELDSET_LABEL"
description="COM_USERS_A11Y_SETTINGS_FIELDSET_DESC"
>
<field
name="admin_prefers_color_scheme"
type="list"
label="COM_USERS_A11Y_SETTINGS_FIELD_ADMIN_PREFERS_COLOR_SCHEME_LABEL"
description="COM_USERS_A11Y_SETTINGS_FIELD_ADMIN_PREFERS_COLOR_SCHEME_DESC"
default="0"
>
<option value="0">COM_USERS_OS_CHOICE</option>
<option value="light">COM_USERS_LIGHT</option>
<option value="dark">COM_USERS_DARK</option>
</field>
<field
name="site_prefers_color_scheme"
type="list"
label="COM_USERS_A11Y_SETTINGS_FIELD_SITE_PREFERS_COLOR_SCHEME_LABEL"
description="COM_USERS_A11Y_SETTINGS_FIELD_SITE_PREFERS_COLOR_SCHEME_DESC"
default="0"
>
<option value="0">COM_USERS_OS_CHOICE</option>
<option value="light">COM_USERS_LIGHT</option>
<option value="dark">COM_USERS_DARK</option>
</field>
<field
name="a11y_mono"
type="radio"
Expand Down
7 changes: 7 additions & 0 deletions administrator/language/en-GB/com_users.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
COM_USERS="Users"
COM_USERS_A11Y_SETTINGS_FIELDSET_DESC="These settings apply per user and are only available in supported templates eg Atum."
COM_USERS_A11Y_SETTINGS_FIELDSET_LABEL="Accessibility Settings"
COM_USERS_A11Y_SETTINGS_FIELD_ADMIN_PREFERS_COLOR_SCHEME_DESC="Sets the colour scheme for the Administrator template"
COM_USERS_A11Y_SETTINGS_FIELD_ADMIN_PREFERS_COLOR_SCHEME_LABEL="Administrator Colour Scheme"
COM_USERS_A11Y_SETTINGS_FIELD_SITE_PREFERS_COLOR_SCHEME_DESC="Sets the colour scheme for the Site template"
COM_USERS_A11Y_SETTINGS_FIELD_SITE_PREFERS_COLOR_SCHEME_LABEL="Site Forced Theme"
COM_USERS_A11Y_SETTINGS_FIELD_CONTRAST="High Contrast"
COM_USERS_A11Y_SETTINGS_FIELD_FONTSIZE="Increase Font Size"
COM_USERS_A11Y_SETTINGS_FIELD_HIGHLIGHT="Highlight Links"
Expand Down Expand Up @@ -85,6 +89,7 @@ COM_USERS_CONFIG_MFATRYCOUNT_LABEL="Maximum MFA tries"
COM_USERS_CONFIG_MFATRYTIME_LABEL="MFA limit block time (in hours)"
COM_USERS_COUNT_DISABLED_USERS="Blocked Users"
COM_USERS_COUNT_ENABLED_USERS="Enabled Users"
COM_USERS_DARK="Dark"
COM_USERS_DASHBOARD_TITLE="Users Dashboard"
COM_USERS_DEBUG_EXPLICIT_ALLOW="Allowed"
COM_USERS_DEBUG_EXPLICIT_DENY="Forbidden"
Expand Down Expand Up @@ -205,6 +210,7 @@ COM_USERS_LEVEL_FORM_EDIT="Edit Viewing Access Level"
COM_USERS_LEVEL_FORM_NEW="New Viewing Access Level"
COM_USERS_LEVEL_HEADER_ERROR="User header access level error."
COM_USERS_LEVEL_SAVE_SUCCESS="Access level saved."
COM_USERS_LIGHT="Light"
COM_USERS_MAIL_DETAILS="Details"
COM_USERS_MAIL_EMAIL_SENT_TO_N_USERS="Email sent to %d users."
COM_USERS_MAIL_EMAIL_SENT_TO_N_USERS_1="Email sent to one user."
Expand Down Expand Up @@ -350,6 +356,7 @@ COM_USERS_OPTION_RANGE_TODAY="today"
COM_USERS_OPTION_SELECT_COMPONENT="- Select Component -"
COM_USERS_OPTION_SELECT_LEVEL_END="- Select End Level -"
COM_USERS_OPTION_SELECT_LEVEL_START="- Select Start Level -"
COM_USERS_OS_CHOICE="OS Choice"
COM_USERS_PASSWORD_RESET_REQUIRED="Password Reset Required"
COM_USERS_POSTINSTALL_MULTIFACTORAUTH_ACTION="Enable the new Multi-factor Authentication plugins"
COM_USERS_POSTINSTALL_MULTIFACTORAUTH_BODY="<p>Joomla! comes with a drastically improved <a href=\"https://en.wikipedia.org/wiki/Multi-factor_authentication\" target=\"_blank\" rel=\"noopener noreferrer\">Multi-factor Authentication</a> experience to help you secure the logins of your users.</p><p>Unlike the Two Factor Authentication feature in previous versions of Joomla, users <em>no longer have to enter a Security Code with their username and password</em>. The Multi-factor Authentication happens in a separate step after logging into the site. Until they complete their Multi-factor Authentication validation users cannot navigate to other pages or use the site. This makes Multi-factor Authentication <a href=\"https://en.wikipedia.org/wiki/Phishing\" target=\"_blank\" rel=\"noopener noreferrer\">phishing</a>&ndash;resistant. It also allows for interactive validation methods like passkeys (including integration with Windows Hello, Apple TouchID / FaceID and Android Biometric Screen Lock), or sending 6-digit authentication codes by email. Both of these interactive, convenient methods are now available as plugins shipped with Joomla! itself.</p>"
Expand Down
10 changes: 9 additions & 1 deletion administrator/templates/atum/component.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,18 @@
$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']);

// Getting user accessibility settings
$user = $app->getIdentity();
$userScheme = $user->getParam('admin_prefers_color_scheme', '0');
$forcedSchemeAtr = $forcedScheme ? 'data-forced-theme ' : '';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does $forcedScheme come from? Can it be the logic here needs a change after the change to tristate?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think the above line 53 just needs to be removed. Same for the other PHP files of course.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It supposed to be forcedSchemeAtr = '';


if (in_array($userScheme, ['light', 'dark'])) {
$forcedSchemeAtr = ' data-forced-theme data-theme="' . $userScheme . '"';
}
?>

<!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 $forcedSchemeAtr; ?>>
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
Expand Down
26 changes: 17 additions & 9 deletions administrator/templates/atum/error_full.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@
->useStyle('template.active.language')
->useStyle('template.user')
->addInlineStyle(':root {
--hue: ' . $matches[1] . ';
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
}');
--hue: ' . $matches[1] . ';
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
}');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the "code style" change here should be reverted. It's in the inline CSS not the PHP code, so I think the tabs are ok, also for consistency with the other template PHP files.


// Override 'template.active' asset to set correct ltr/rtl dependency
$wa->registerStyle('template.active', '', [], [], ['template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);
Expand All @@ -79,11 +79,19 @@

$monochrome = (bool) $this->params->get('monochrome');

$user = $app->getIdentity();
$userScheme = $user->getParam('admin_prefers_color_scheme', '0');
$forcedSchemeAtr = $forcedScheme ? 'data-forced-theme ' : '';

if (in_array($userScheme, ['light', 'dark'])) {
$forcedSchemeAtr = ' data-forced-theme data-theme="' . $userScheme . '"';
}

// @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 $forcedSchemeAtr; ?>>
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
Expand Down
10 changes: 9 additions & 1 deletion administrator/templates/atum/error_login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,19 @@

$monochrome = (bool) $this->params->get('monochrome');

$user = $app->getIdentity();
$userScheme = $user->getParam('admin_prefers_color_scheme', '0');
$forcedSchemeAtr = $forcedScheme ? 'data-forced-theme ' : '';

if (in_array($userScheme, ['light', 'dark'])) {
$forcedSchemeAtr = ' data-forced-theme data-theme="' . $userScheme . '"';
}

// @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 $forcedSchemeAtr; ?>>
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
Expand Down
10 changes: 9 additions & 1 deletion administrator/templates/atum/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@
$sidebarState = $input->cookie->get('atumSidebarState', '');

// Getting user accessibility settings
$user = $app->getIdentity();
$userScheme = $user->getParam('admin_prefers_color_scheme', '0');
$forcedSchemeAtr = $forcedScheme ? 'data-forced-theme ' : '';

if (in_array($userScheme, ['light', 'dark'])) {
$forcedSchemeAtr = ' data-forced-theme data-theme="' . $userScheme . '"';
}

$a11y_mono = (bool) $app->getIdentity()->getParam('a11y_mono', '');
$a11y_contrast = (bool) $app->getIdentity()->getParam('a11y_contrast', '');
$a11y_highlight = (bool) $app->getIdentity()->getParam('a11y_highlight', '');
Expand Down Expand Up @@ -99,7 +107,7 @@
$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 $forcedSchemeAtr; ?>>
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
Expand Down