This is an automated email from the ASF dual-hosted git repository.
ilgrosso pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/syncope.git
The following commit(s) were added to refs/heads/master by this push:
new 9916a07c36 Implement dark theme switcher (#1556)
9916a07c36 is described below
commit 9916a07c361756ae042cdd39fd2d0c91de10372e
Author: Matteo Tatoni <[email protected]>
AuthorDate: Thu Sep 24 16:17:00 2026 +0200
Implement dark theme switcher (#1556)
---
.../resources/ui-commons/css/accessibility.scss | 20 +-
.../css/accessibility/accessibilityHC.scss | 304 ---------------------
.../resources/ui-commons/css/syncopeUI.scss | 2 +-
.../resources/ui-commons/js/accessibility.js | 226 +++------------
.../apache/syncope/client/console/pages/Login.html | 70 ++++-
.../apache/syncope/client/enduser/pages/Login.html | 71 ++++-
.../asciidoc/images/accessibility-enduser01.png | Bin 22633 -> 43622 bytes
src/main/asciidoc/images/accessibility-icon03.png | Bin 0 -> 1718 bytes
src/main/asciidoc/images/accessibility-icon04.png | Bin 0 -> 3249 bytes
src/main/asciidoc/images/consoleLogin.png | Bin 17312 -> 31039 bytes
src/main/asciidoc/images/enduserLogin.png | Bin 19658 -> 37744 bytes
.../reference-guide/usage/adminconsole.adoc | 20 +-
.../asciidoc/reference-guide/usage/enduser.adoc | 25 +-
13 files changed, 205 insertions(+), 533 deletions(-)
diff --git
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss
index 8ce6a9a26d..d61bb2f499 100644
---
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss
+++
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss
@@ -39,7 +39,7 @@
outline: 1px var(--app-accessibility-outline) solid;
}
-#change_contrast {
+#change_theme .btn-accessibility {
top: 0;
}
@@ -48,7 +48,7 @@
}
@include phone {
- #change_contrast {
+ #change_theme .btn-accessibility {
bottom: 52px;
top: auto;
}
@@ -58,3 +58,19 @@
top: auto;
}
}
+
+.login-logo {
+ position: relative;
+}
+
+.login-logo-dark {
+ display: none;
+}
+
+html[data-bs-theme="dark"] .login-logo-light {
+ display: none;
+}
+
+html[data-bs-theme="dark"] .login-logo-dark {
+ display: inline;
+}
diff --git
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility/accessibilityHC.scss
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility/accessibilityHC.scss
deleted file mode 100644
index 423d9ce881..0000000000
---
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility/accessibilityHC.scss
+++ /dev/null
@@ -1,304 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-@import 'utils';
-
-$accessibility_color_white: #f7f7f7;
-$accessibility_color_black: #000000;
-
-
-/* General
-=============================================================================
*/
-.content-wrapper,
-.content-wrapper .box,
-.modal-content,
-.modal-header,
-.background-footer,
-input:not(:disabled):not([type="file"]),
-select,
-select option,
-button:not(.close),
-.table .sorting,
-.dataTables_paginate a,
-.modal-footer,
-.box-header,
-.dropdown-menu,
-.main-footer,
-.circular-actions a,
-.k-select,
-.file-caption.kv-fileinput-caption {
- color: $accessibility_color_white !important;
- background-color: #0f1417 !important;
-}
-
-
-.dataTable thead th:after,
-.close {
- color: $accessibility_color_white !important;
- opacity: 0.8 !important;
-}
-
-
-.input-group-addon a,
-.input-group-addon i,
-.dropdown-menu > li:not(.disabled) > a:hover,
-.dropdown-menu > li:not(.disabled) > a:hover span,
-.dropdown-menu > li:not(.disabled) > a:focus,
-.dropdown-menu > li:not(.disabled) > a:focus span,
-#startAtContainer .input-group-addon span,
-#startAtContainer .k-widget span,
-#startAtContainer .k-widget i,
-#startAtContainer .k-widget input,
-.modal-footer i,
-.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default,
-.content-wrapper .nav-tabs a,
-.wrapper .content-wrapper .nav.nav-tabs li.active a span,
-.wrapper .content-wrapper .nav.nav-tabs li.active a,
-.wrapper .content-wrapper .nav.nav-tabs li a:hover span,
-.wrapper .content-wrapper .nav.nav-tabs li a:hover,
-.wrapper .content-wrapper .nav.nav-tabs li a:active span,
-.wrapper .content-wrapper .nav.nav-tabs li a:active,
-.wrapper .content-wrapper .nav.nav-tabs li a:focus span,
-.wrapper .content-wrapper .nav.nav-tabs li a:focus,
-.wrapper .content-wrapper .tab-content .btn-primary .fa-download {
- color: $accessibility_color_black !important;
-}
-
-
-.content-wrapper a:not(.btn-primary),
-.content-wrapper
span:not(.label-info):not([role="presentation"]):not([class^='cm-']),
-.content-wrapper p,
-.content-wrapper .box-title a,
-.realm-choice .dropdown-menu > li:not(.disabled) > a:hover,
-.realm-choice .dropdown-menu > li:not(.disabled) > a:hover span,
-.realm-choice .dropdown-menu > li:not(.disabled) > a:focus,
-.realm-choice .dropdown-menu > li:not(.disabled) > a:focus span,
-.box-header,
-.breadcrumb .active,
-table tbody tr:hover button span,
-.dropdown-menu > li > a,
-.modal-header button,
-.circular-actions a i,
-.wizard-form .input-group-addon i,
-#startAtContainer .input-group-addon i,
-.attribute .input-group-addon i {
- color: $accessibility_color_white !important;
-}
-
-
-.box.box-primary {
- border-top-color: $accessibility_color_white;
-}
-
-
-img,
-.content-wrapper div.btn.btn-file span.hidden-xs {
- background-color: $accessibility_color_white;
- color: $accessibility_color_black !important;
-}
-.enduser_navbar .navbar-brand img {
- background-color: transparent;
-}
-.btn-primary,
-.callout.callout-info,
-.alert-info,
-.label-info,
-.modal-info .modal-body {
- background-color: $accessibility_color_white !important;
- color: $accessibility_color_black !important;
-}
-
-
-.logo img,
-.modal-content .input-group .input-group-addon,
-.wizard-view .input-group .input-group-addon {
- background-color: transparent;
-}
-
-
-.modal-dialog {
- border: 2px solid white;
-}
-
-
-#veil:not(:required):after {
- @include shadow($accessibility_color_white 1.5em 0 0 0,
- $accessibility_color_white 1.1em 1.1em 0 0,
- $accessibility_color_white 0 1.5em 0 0,
- $accessibility_color_white -1.1em 1.1em 0 0,
- $accessibility_color_white -1.5em 0 0 0,
- $accessibility_color_white -1.1em -1.1em 0 0,
- $accessibility_color_white 0 -1.5em 0 0,
- $accessibility_color_white 1.1em -1.1em 0 0);
-}
-
-
-.input-group input:disabled,
-.input-group input[disabled],
-.control-sidebar-dark .control-sidebar-menu > li > a:hover,
-.table-hover > tbody > tr:hover,
-.main-header .navbar .sidebar-toggle:hover,
-.main-header .logo:hover,
-div.toggle-menu ul li:hover,
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-menu > li > a:hover,
-.k-block,
-.k-draghandle,
-.k-grid-header,
-.k-grouping-header,
-.k-header,
-.k-pager-wrap,
-.k-toolbar,
-.k-treemap-tile,
-.k-picker-wrap,
-.k-state-disabled,
-.km-pane-wrapper .k-header {
- background-color: rgba(108, 115, 117, 0.55);
-}
-
-
-.sidebar-mini .main-header .navbar {
- background-color: #222d32;
- border-bottom: 1px white solid;
- box-sizing: border-box;
-}
-.sidebar-mini .main-header .logo,
-div.toggle-menu {
- background-color: #222d32;
-}
-
-
-div.toggle-menu {
- border: 1px solid $accessibility_color_white;
-}
-
-
-a,
-.pagination > .active > a,
-.pagination > .active > a:focus,
-.pagination > .active > a:hover,
-.pagination > .active > span,
-.pagination > .active > span:focus,
-.pagination > .active > span:hover {
- border-color: #76abd9;
-}
-a {
- color: #76abd9;
-}
-
-
-.logs button.btn-primary {
- border-color: $accessibility_color_white;
-}
-.logs button.btn-primary:hover {
- border-color: #adadad;
-}
-div.infolabel,
-.input-group input:disabled,
-.input-group input[disabled] {
- color: #d2d2d2;
-}
-
-
-.text-bg-danger,
-.callout.callout-danger,
-.alert-danger,
-.bg-danger,
-.alert-error,
-.label-danger,
-.modal-danger .modal-body,
-.btn-danger.active,
-.btn-danger:active,
-.open>.dropdown-toggle.btn-danger {
- background-color: #942819 !important;
-}
-.text-bg-warning {
- background-color: #6F4706 !important;
-}
-.text-bg-success,
-.copy-clipboard-feedback,
-.btn-success,
-.callout.callout-success,
-.alert-success,
-.label-success,
-.modal-success .modal-body {
- background-color: #005C32 !important;
-}
-.bg-info {
- background-color: #004E61 !important;
-}
-.text-bg-warning,
-.callout.callout-warning,
-.alert-warning,
-.label-warning,
-.modal-warning .modal-body {
- background-color: #6F4706 !important;
-}
-.callout.callout-warning {
- border-color: #6F4706;
-}
-
-
-.bootstrap-select .btn.btn-default {
- background-color: rgba(101, 101, 101, 0.7) !important;
-}
-
-
-/* Login page
-=============================================================================
*/
-.login-body {
- background-image: linear-gradient(rgb(31, 109, 142), #004626);
-}
-
-.login-logo {
- background: transparent;
-}
-
-.btn-accessibility {
- color: $accessibility_color_white !important;
-}
-
-.form-signin {
- .btn-primary,
- .btn-primary {
- border: 2px solid white;
- }
- .btn-primary.focus,
- .btn-primary:focus {
- border-color: #8c8c8c;
- }
-}
-
-.login-card {
- background-color: #0f1417;
-}
-
-
-
-
-/* From Console Admin LTE
-=============================================================================
*/
-.dark-theme .callout.callout-danger, .dark-theme .callout.callout-warning,
-.dark-theme .callout.callout-info, .dark-theme .callout.callout-success,
-.dark-theme .alert-success, .dark-theme .alert-danger, .bg-danger, .dark-theme
.label-success,
-.dark-theme .alert-error, .dark-theme .alert-warning, .dark-theme .alert-info,
.dark-theme .label-danger,
-.dark-theme .label-info, .dark-theme .label-warning, .dark-theme
.label-primary {
- color: #fff !important;
-}
diff --git
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss
index 6ccb80110f..fdf5ddaac4 100644
---
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss
+++
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss
@@ -449,7 +449,7 @@ td.checkGroupColumn {
.pwstrengthProgress {
position: absolute;
- margin-top: 35px;
+ margin-top: 40px;
width: 100%;
}
diff --git
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js
index 8a2d99ddda..c59535b557 100644
---
a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js
+++
b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js
@@ -1,4 +1,3 @@
-
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
@@ -17,205 +16,42 @@
* specific language governing permissions and limitations
* under the License.
*/
-
-$(document).ready(function () {
-
- var locationDomain = window.location.origin + '/' +
window.location.pathname.split('/')[1];
-
- var initAssetsManager = function () {
- var AssetsManager = {};
-
- var createLink = function (id, url) {
- if (!$('link#' + id).length && !$('link[href="' + url + '"').length) {
- var link = document.createElement('link');
- link.rel = 'stylesheet';
- link.href = url;
- link.type = "text/css";
- $('head').append(link);
- }
- };
-
- var createScript = function (id, url) {
- if (!$('script#' + id).length && !$('script[src="' + url + '"').length) {
- var script = document.createElement('script');
- script.src = url;
- $('body').append(script);
- }
- };
-
- AssetsManager.checkAlreadyLoaded = function (url, type) {
- var elems = (type === 'css') ? document.styleSheets : ((type === 'js') ?
document.scripts : '');
- var attr = (type === 'js') ? 'src' : ((type === 'css') ? 'href' :
'none');
- for (var i in elems) {
- var attrUrl = elems[i][attr] || "";
- var assetName = attrUrl.split("/").slice(-1).join();
- if (attrUrl !== ""
- && (assetName === url.split("/").slice(-1).join() || assetName
=== url)) {
- return true;
+$(function () {
+ const locationDomain = window.location.origin + '/' +
window.location.pathname.split('/')[1];
+ const fontSizeCss = locationDomain +
'/ui-commons/css/accessibility/accessibilityFont.css';
+ const fontSizePreference = 'font_size_pref';
+
+ let increasedFont = localStorage.getItem(fontSizePreference) === 'true';
+
+ const switchFontSize = () => {
+ const $stylesheet = $('link#font_size_css');
+
+ if (increasedFont) {
+ if (!$stylesheet.length) {
+ $('<link>', {
+ id: 'font_size_css',
+ rel: 'stylesheet',
+ href: fontSizeCss
+ }).appendTo('head');
+ }
+ } else {
+ $stylesheet.remove();
}
- }
- return false;
- };
- var removeLoaded = function (url, type) {
- var tag = (type === 'js') ? 'script' : ((type === 'css') ? 'link' : '');
- if (AssetsManager.checkAlreadyLoaded(url, type)) {
- $(tag + '[href~="' + url + '"]').remove();
- }
+ localStorage.setItem(fontSizePreference, increasedFont);
};
- AssetsManager.inject = function (id, url, type) {
- switch (type) {
- case 'js':
- createScript(id, url);
- break;
-
- case 'css':
- createLink(id, url);
- break;
-
- default:
- break;
- }
+ const toggleFontSize = () => {
+ increasedFont = !increasedFont;
+ switchFontSize();
};
- AssetsManager.remove = function (url, type) {
- removeLoaded(url, type);
- };
-
- return AssetsManager;
- };
-
- var initAccessibilityController = function () {
- AccessibilityController = {};
-
- var AssetsManager = initAssetsManager();
-
- var fontSizeFiles = [
- locationDomain + '/ui-commons/css/accessibility/accessibilityFont.css'
- ];
-
- var darkThemeFiles = [
- locationDomain + '/ui-commons/css/accessibility/accessibilityHC.css'
- ];
-
- var darkThemeMainClass = 'dark-theme';
-
- var doSwitch = function (check, files) {
- if (!check) {
- for (var i = 0; i < files.length; i++) {
- AssetsManager.remove(files[i], 'css');
- }
- } else {
- for (var i = 0; i < files.length; i++) {
- AssetsManager.inject('theme_css_' + i, files[i], 'css');
- }
- }
- };
-
- var doSwitchTheme = function (check, files) {
- doSwitch(check, files);
- };
-
- var savePreference = function (key, value) {
- window.localStorage.setItem(key, value);
- };
-
- var getPreference = function (key) {
- var storageValue = window.localStorage.getItem(key);
- if (storageValue === null) {
- savePreference(key, 'false');
- }
- return storageValue === 'true';
- };
-
- AccessibilityController.FONT_SIZE_PREF = 'font_size_pref';
- AccessibilityController.HC_THEME_PREF = 'hc_theme_pref';
-
- var isIncreasedFont =
getPreference(AccessibilityController.FONT_SIZE_PREF);
- var isHighContrast = getPreference(AccessibilityController.HC_THEME_PREF);
-
- AccessibilityController.checkPref = function (pref) {
- switch (pref) {
- case AccessibilityController.FONT_SIZE_PREF:
- doSwitch(isIncreasedFont, fontSizeFiles);
- break;
-
- case AccessibilityController.HC_THEME_PREF:
- doSwitchTheme(isHighContrast, darkThemeFiles);
- break;
-
- default:
- break;
- }
- };
-
- AccessibilityController.switchIncreasedFont = function () {
- isIncreasedFont = !isIncreasedFont;
- doSwitch(isIncreasedFont, fontSizeFiles);
- savePreference(AccessibilityController.FONT_SIZE_PREF, isIncreasedFont);
- };
-
- AccessibilityController.switchTheme = function () {
- isHighContrast = !isHighContrast;
- doSwitchTheme(isHighContrast, darkThemeFiles);
- savePreference(AccessibilityController.HC_THEME_PREF, isHighContrast);
- };
-
- return AccessibilityController;
- };
-
- var AccessibilityController = initAccessibilityController();
-
- AccessibilityController.checkPref(AccessibilityController.FONT_SIZE_PREF);
- AccessibilityController.checkPref(AccessibilityController.HC_THEME_PREF);
-
- $('#change_contrast').off('click.acc_hc');
- $('#change_contrast').on('click.acc_hc', function () {
- AccessibilityController.switchTheme();
- return false;
- });
-
- $('#change_contrast').off('keydown.key_acc_hc keypress.key_acc_hc');
- $('#change_contrast').on('keydown.key_acc_hc keypress.key_acc_hc', function
(event) {
- // check "enter" key pressed
- if (event.which === 13) {
- AccessibilityController.switchTheme();
-
- event.preventDefault();
- return false;
- }
- });
-
- $('#change_fontSize').off('click.acc_f');
- $('#change_fontSize').on('click.acc_f', function () {
- AccessibilityController.switchIncreasedFont();
- return false;
- });
-
- $('#change_fontSize').off('keydown.key_acc_f keypress.key_acc_f');
- $('#change_fontSize').on('keydown.key_acc_f keypress.key_acc_f', function
(event) {
- // check "enter" key pressed
- if (event.which === 13) {
- AccessibilityController.switchIncreasedFont();
-
- event.preventDefault();
- return false;
- }
- });
-
- $('body').off('keydown.acc_binding keypress.acc_binding');
- $('body').on('keydown.acc_binding keypress.acc_binding', function (event) {
- // alt - shift - F
- // alt - shift - H
- if (event.altKey && event.shiftKey) {
- if (event.keyCode === 72) {
- AccessibilityController.switchTheme();
- } else if (event.keyCode === 70) {
- AccessibilityController.switchIncreasedFont();
- }
- event.preventDefault();
- }
- });
+ switchFontSize();
+ $('#change_fontSize')
+ .off('.acc_font')
+ .on('click.acc_font', function () {
+ toggleFontSize();
+ return false;
+ });
});
diff --git
a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
index 68e6a91e4f..6516c5fc34 100644
---
a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
+++
b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
@@ -42,21 +42,79 @@ under the License.
<body class="login-body login_console">
<div id="accessibility">
- <div id="change_contrast" class="btn-accessibility">
- <i aria-label="Toggle high contrast colors mode" tabindex="0"
accesskey="H"
- class="fa fa-adjust">
- </i>
+ <div id="change_theme">
+ <div class="btn-accessibility"
+ data-bs-theme-value="light">
+ <i aria-label="Switch to light theme"
+ accesskey="L"
+ class="fa fa-sun">
+ </i>
+ </div>
+
+ <div class="btn-accessibility"
+ data-bs-theme-value="dark">
+ <i aria-label="Switch to dark theme"
+ accesskey="D"
+ class="fa fa-moon">
+ </i>
+ </div>
+
+ <div class="btn-accessibility"
+ data-bs-theme-value="auto">
+ <i aria-label="Switch to automatic theme"
+ accesskey="U"
+ class="fa fa-adjust">
+ </i>
+ </div>
</div>
+
<div id="change_fontSize" class="btn-accessibility">
- <i aria-label="Toggle font size increment" tabindex="1" accesskey="F"
+ <i aria-label="Toggle font size increment"
+ tabindex="1"
+ accesskey="S"
class="fa fa-font">
</i>
</div>
</div>
+ <script>
+ $(function () {
+ const $themeButtons = $('#change_theme [data-bs-theme-value]');
+
+ function updateThemeButton(theme) {
+ $themeButtons.hide();
+
+ const nextTheme = {
+ auto: 'light',
+ light: 'dark',
+ dark: 'auto'
+ }[theme] || 'light';
+
+ const $button =
$themeButtons.filter(`[data-bs-theme-value="${nextTheme}"]`);
+
+ $button.show();
+ }
+
+ document.addEventListener('changed.lte.color-mode', function (event) {
+ updateThemeButton(event.detail.theme);
+ });
+
+ const currentTheme = localStorage.getItem('lte-theme') || 'auto';
+ updateThemeButton(currentTheme);
+ });
+ </script>
+
<div class="container">
<div class="login-card card card-container">
- <img class="login-logo" src="ui-commons/img/logo-green.png"/>
+ <div class="login-logo">
+ <img class="login-logo-light"
+ src="ui-commons/img/logo-green.png"
+ alt="Apache Syncope"/>
+
+ <img class="login-logo-dark"
+ src="ui-commons/img/logo.png"
+ alt="Apache Syncope"/>
+ </div>
<span wicket:id="feedback" role="alert"/>
diff --git
a/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Login.html
b/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Login.html
index 712a2c1705..38f8cafa47 100644
---
a/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Login.html
+++
b/client/idrepo/enduser/src/main/resources/org/apache/syncope/client/enduser/pages/Login.html
@@ -42,20 +42,79 @@ under the License.
<body class="login-body">
<div id="accessibility">
- <div id="change_contrast" class="btn-accessibility">
- <i aria-label="Toggle high contrast colors mode" tabindex="0"
accesskey="H"
- class="fa fa-adjust">
- </i>
+ <div id="change_theme">
+ <div class="btn-accessibility"
+ data-bs-theme-value="light">
+ <i aria-label="Switch to light theme"
+ accesskey="L"
+ class="fa fa-sun">
+ </i>
+ </div>
+
+ <div class="btn-accessibility"
+ data-bs-theme-value="dark">
+ <i aria-label="Switch to dark theme"
+ accesskey="D"
+ class="fa fa-moon">
+ </i>
+ </div>
+
+ <div class="btn-accessibility"
+ data-bs-theme-value="auto">
+ <i aria-label="Switch to automatic theme"
+ accesskey="A"
+ class="fa fa-adjust">
+ </i>
+ </div>
</div>
+
<div id="change_fontSize" class="btn-accessibility">
- <i aria-label="Toggle font size increment" tabindex="1" accesskey="F"
+ <i aria-label="Toggle font size increment"
+ tabindex="1"
+ accesskey="S"
class="fa fa-font">
</i>
</div>
</div>
+
+ <script>
+ $(function () {
+ const $themeButtons = $('#change_theme [data-bs-theme-value]');
+
+ function updateThemeButton(theme) {
+ $themeButtons.hide();
+
+ const nextTheme = {
+ auto: 'light',
+ light: 'dark',
+ dark: 'auto'
+ }[theme] || 'light';
+
+ const $button =
$themeButtons.filter(`[data-bs-theme-value="${nextTheme}"]`);
+
+ $button.show();
+ }
+
+ document.addEventListener('changed.lte.color-mode', function (event) {
+ updateThemeButton(event.detail.theme);
+ });
+
+ const currentTheme = localStorage.getItem('lte-theme') || 'auto';
+ updateThemeButton(currentTheme);
+ });
+ </script>
+
<div class="container">
<div class="login-card card card-container">
- <img class="login-logo" src="ui-commons/img/logo-green.png"/>
+ <div class="login-logo">
+ <img class="login-logo-light"
+ src="ui-commons/img/logo-green.png"
+ alt="Apache Syncope"/>
+
+ <img class="login-logo-dark"
+ src="ui-commons/img/logo.png"
+ alt="Apache Syncope"/>
+ </div>
<span wicket:id="feedback" role="alert"/>
diff --git a/src/main/asciidoc/images/accessibility-enduser01.png
b/src/main/asciidoc/images/accessibility-enduser01.png
index 37d7d52d29..038dd7b709 100644
Binary files a/src/main/asciidoc/images/accessibility-enduser01.png and
b/src/main/asciidoc/images/accessibility-enduser01.png differ
diff --git a/src/main/asciidoc/images/accessibility-icon03.png
b/src/main/asciidoc/images/accessibility-icon03.png
new file mode 100644
index 0000000000..e8b5f7022c
Binary files /dev/null and b/src/main/asciidoc/images/accessibility-icon03.png
differ
diff --git a/src/main/asciidoc/images/accessibility-icon04.png
b/src/main/asciidoc/images/accessibility-icon04.png
new file mode 100644
index 0000000000..78b9fcac47
Binary files /dev/null and b/src/main/asciidoc/images/accessibility-icon04.png
differ
diff --git a/src/main/asciidoc/images/consoleLogin.png
b/src/main/asciidoc/images/consoleLogin.png
index 39baf8e297..90bae08511 100644
Binary files a/src/main/asciidoc/images/consoleLogin.png and
b/src/main/asciidoc/images/consoleLogin.png differ
diff --git a/src/main/asciidoc/images/enduserLogin.png
b/src/main/asciidoc/images/enduserLogin.png
index c5c26c5013..56c8e0b1e0 100644
Binary files a/src/main/asciidoc/images/enduserLogin.png and
b/src/main/asciidoc/images/enduserLogin.png differ
diff --git a/src/main/asciidoc/reference-guide/usage/adminconsole.adoc
b/src/main/asciidoc/reference-guide/usage/adminconsole.adoc
index aaedfa7bff..a829519d7e 100644
--- a/src/main/asciidoc/reference-guide/usage/adminconsole.adoc
+++ b/src/main/asciidoc/reference-guide/usage/adminconsole.adoc
@@ -52,19 +52,25 @@ image::console-mfa-login.png[console-mfa-login]
The Admin UI is accessible to the visually impaired.
-The `H`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcut can
-be used to easily toggle "High contrast mode" by using the keyboard.
-In this mode, the website colors are switched to a higher contrast color
schema.
+The theme switcher allows choosing between light, dark, and automatic themes.
+The `U`, `L`, and `D`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcuts can
+be used to switch themes using the keyboard.
E.g.
|===
|Shortcut |Purpose
-|`Alt` + `Shift` + `H`
-|Toggle "High contrast mode" on Firefox and Chrome browsers on Linux
+|`Alt` + `Shift` + `U`
+|Switch to automatic theme on Firefox and Chrome browsers on Linux
+
+|`Alt` + `Shift` + `L`
+|Switch to light theme on Firefox and Chrome browsers on Linux
+
+|`Alt` + `Shift` + `D`
+|Switch to dark theme on Firefox and Chrome browsers on Linux
|===
-The `F`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcut can
+The `S`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcut can
be used to easily toggle "Increased font mode" by using the keyboard.
In this mode, the website font size is increased.
@@ -72,7 +78,7 @@ E.g.
|===
|Shortcut |Purpose
-|`Alt` + `Shift` + `F`
+|`Alt` + `Shift` + `S`
|Toggle "Increased font mode" on Firefox and Chrome browsers on Linux
|===
diff --git a/src/main/asciidoc/reference-guide/usage/enduser.adoc
b/src/main/asciidoc/reference-guide/usage/enduser.adoc
index 4be0a85ea6..12b9dd315e 100644
--- a/src/main/asciidoc/reference-guide/usage/enduser.adoc
+++ b/src/main/asciidoc/reference-guide/usage/enduser.adoc
@@ -56,23 +56,24 @@ Two icons are present in the main page, in the right corner:
[.text-center]
image::accessibility-enduser01.png[title="Enduser accessibility
icons",alt="Enduser accessibility icons"]
-By clicking the top right corner icon
image:accessibility-icon01.png[Accessibility HC mode,30,30] it is possible to
-toggle the "High contrast mode".
-In this mode, the website colors are switched to a higher contrast color
schema.
+By clicking the first icon, which can be image:accessibility-icon04.png[Light
theme,30,30], image:accessibility-icon03.png[Dark theme,30,30], or
image:accessibility-icon01.png[Automatic theme,30,30], it is possible to switch
between the light, dark, and automatic themes.
+The `U`, `L`, and `D`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcuts can also be used to switch themes using the keyboard.
[TIP]
====
-The `H`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcut can
-be used to easily toggle "High contrast mode" by using the keyboard.
-
-E.g.
+E.g.
|===
|Shortcut |Purpose
-|`Alt` + `Shift` + `H`
-|Toggle "High contrast mode" on Firefox and Chrome browsers on Linux
-|===
+|`Alt` + `Shift` + `U`
+|Switch to automatic theme on Firefox and Chrome browsers on Linux
+|`Alt` + `Shift` + `L`
+|Switch to light theme on Firefox and Chrome browsers on Linux
+
+|`Alt` + `Shift` + `D`
+|Switch to dark theme on Firefox and Chrome browsers on Linux
+|===
====
By clicking the second icon image:accessibility-icon02.png[Accessibility
Increased Font mode,30,30] it is possible
@@ -81,14 +82,14 @@ In this mode, the website font size is increased.
[TIP]
====
-The `F`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcut can
+The `S`
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^]
shortcut can
be used to easily toggle "Increased font mode" by using the keyboard.
E.g.
|===
|Shortcut |Purpose
-|`Alt` + `Shift` + `F`
+|`Alt` + `Shift` + `S`
|Toggle "Increased font mode" on Firefox and Chrome browsers on Linux
|===
