mirror of
https://github.com/kanidm/kanidm.git
synced 2025-02-23 12:37:00 +01:00
a3358828a8
* 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 <james@terminaloutcomes.com>
20 lines
797 B
JavaScript
20 lines
797 B
JavaScript
/** 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);
|