From a3358828a8b28db93473b6067d37ec2422f08b15 Mon Sep 17 00:00:00 2001 From: George Wu Date: Mon, 6 Jan 2025 02:58:42 -0800 Subject: [PATCH] Add support for prefers-color-scheme using Bootstrap classes. (#3327) * Add support for prefers-color-scheme using Bootstrap classes. * Move stylesheet changes to separate javascript file. * fix(html): don't specify the integrity hash in the tag for style.js * fix(log): debug-log integrity hashes for troubleshooting * fix(css): move to using bootstrap standard variables for colours and theming * fix(js): rewrite to simplify and use standard bootstrap functionality * fix(makefile): codespell thingie was complaining * run prettier on css/js. --------- Co-authored-by: James Hodgkinson --- Makefile | 5 ++-- server/core/src/https/mod.rs | 2 ++ server/core/static/style.css | 27 +++++++++++++++---- server/core/static/style.js | 19 +++++++++++++ server/core/templates/apps_partial.html | 2 +- server/core/templates/base.html | 5 +++- server/core/templates/base_htmx.html | 5 +++- .../templates/credentials_update_partial.html | 2 +- server/core/templates/login.html | 2 +- server/core/templates/login_backupcode.html | 2 +- server/core/templates/login_mech_choose.html | 2 +- server/core/templates/login_password.html | 2 +- server/core/templates/login_totp.html | 2 +- server/core/templates/login_webauthn.html | 4 +-- server/core/templates/navbar.html | 2 +- .../core/templates/oauth2_device_login.html | 2 +- .../templates/user_settings_partial_base.html | 2 +- 17 files changed, 65 insertions(+), 22 deletions(-) create mode 100644 server/core/static/style.js diff --git a/Makefile b/Makefile index ec11d2bb4..cd3f8e896 100644 --- a/Makefile +++ b/Makefile @@ -178,9 +178,8 @@ codespell: --skip='*.svg' \ --skip='*.br' \ --skip='./rlm_python/mods-available/eap' \ - --skip='./server/lib/src/constants/system_config.rs' - --skip='./pykanidm/site' \ - --skip='./server/lib/src/constants/*.json' + --skip='./server/lib/src/constants/system_config.rs' \ + --skip='./pykanidm/site' .PHONY: test/pykanidm/pytest test/pykanidm/pytest: ## python library testing diff --git a/server/core/src/https/mod.rs b/server/core/src/https/mod.rs index 6b8e34cdd..049c62e00 100644 --- a/server/core/src/https/mod.rs +++ b/server/core/src/https/mod.rs @@ -140,11 +140,13 @@ pub(crate) fn get_js_files(role: ServerRole) -> Result, ()> "external/base64.js", "modules/cred_update.mjs", "pkhtml.js", + "style.js", ]; for filepath in filelist { match generate_integrity_hash(format!("{}/{}", pkg_path, filepath,)) { Ok(hash) => { + debug!("Integrity hash for {}: {}", filepath, hash); let js = JavaScriptFile { hash }; all_pages.push(js) } diff --git a/server/core/static/style.css b/server/core/static/style.css index 577a79909..fe4c1c0b4 100644 --- a/server/core/static/style.css +++ b/server/core/static/style.css @@ -39,7 +39,7 @@ body { &:hover, &.active { - background-color: var(--bs-gray-300); + background-color: var(--bs-tertiary-bg); } .icon-container img { @@ -57,6 +57,23 @@ body { /* * Navbar */ +nav.kanidm_navbar { + background-color: var(--bs-navbar-brand-color); +} + +nav a.navbar-brand, +nav a.nav-link { + color: var(--bs-body-bg); +} + +nav a.navbar-brand:hover, +nav a.nav-link:hover { + color: var(--bs-secondary-bg); +} + +footer { + background-color: var(--bs-tertiary-bg); +} .kanidm_logo { width: 12em; @@ -79,7 +96,7 @@ body { align-items: center; margin: auto; border-radius: 15px; - background: #21252915; + background-color: #21252915; box-shadow: -5px -5px 11px #ededed, 5px 5px 11px #ffffff; @@ -122,15 +139,15 @@ body { } .totp-timer__path-remaining.green { - color: rgb(65, 184, 131); + color: var(--bs-success); } .totp-timer__path-remaining.orange { - color: orange; + color: var(--bs-warning); } .totp-timer__path-remaining.red { - color: red; + color: var(--bs-danger); } .totp-timer__path-remaining.no-transition { diff --git a/server/core/static/style.js b/server/core/static/style.js new file mode 100644 index 000000000..bb11c201a --- /dev/null +++ b/server/core/static/style.js @@ -0,0 +1,19 @@ +/** Queries the user's preferred colour scheme and returns the appropriate value. + From https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript +*/ +function getPreferredTheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; +} + +/** Sets the theme. + */ +function updateColourScheme() { + const theme = getPreferredTheme(); + console.debug(`updateColourScheme theme->${theme}`); + document.documentElement.setAttribute("data-bs-theme", theme); +} + +updateColourScheme(); +window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", updateColourScheme); +window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateColourScheme); +document.body.addEventListener("htmx:afterOnLoad", updateColourScheme); diff --git a/server/core/templates/apps_partial.html b/server/core/templates/apps_partial.html index 4bad4f153..1e63e5682 100644 --- a/server/core/templates/apps_partial.html +++ b/server/core/templates/apps_partial.html @@ -13,7 +13,7 @@ (% match app %) (% when AppLink::Oauth2 with { name, display_name, redirect_url, has_image } %) - + (% if has_image %) ((display_name)) icon diff --git a/server/core/templates/base.html b/server/core/templates/base.html index cef017ee4..30a4b19d4 100644 --- a/server/core/templates/base.html +++ b/server/core/templates/base.html @@ -15,6 +15,9 @@ + @@ -22,7 +25,7 @@ (% block body %)(% endblock %) -