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 %) -