added dark mode to login theme (#32226)

* added dark mode to login theme

fixes: #26178
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* Update themes/src/main/resources/theme/keycloak.v2/login/template.ftl

Co-authored-by: Jon Koops <jonkoops@gmail.com>
Signed-off-by: Erik Jan de Wit <edewit@redhat.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
Signed-off-by: Erik Jan de Wit <edewit@redhat.com>
Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-09-10 10:59:17 +02:00 committed by GitHub
parent 9a1af138a1
commit 97d29bc14f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -48,6 +48,21 @@
checkCookiesAndSetTimer(
"${url.ssoLoginInOtherTabsUrl?no_esc}"
);
const DARK_MODE_CLASS = "pf-v5-theme-dark";
const mediaQuery =window.matchMedia("(prefers-color-scheme: dark)");
updateDarkMode(mediaQuery.matches);
mediaQuery.addEventListener("change", (event) =>
updateDarkMode(event.matches),
);
function updateDarkMode(isEnabled) {
const { classList } = document.documentElement;
if (isEnabled) {
classList.add(DARK_MODE_CLASS);
} else {
classList.remove(DARK_MODE_CLASS);
}
}
</script>
</head>