FIX theme toggle

This commit is contained in:
Hoernschen 2024-01-06 20:44:35 +01:00
parent bfccca3b45
commit 553285c04b
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
9 changed files with 111 additions and 34 deletions

View file

@ -1,18 +0,0 @@
html {
background-color: #383838 !important;
}
html {
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
body {
background-color: #FFF !important;
}
img,
video,
body * [style*="background-image"] {
filter: hue-rotate(180deg) contrast(100%) invert(100%);
-webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
}
/* https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ */

25
static/js/theme.js Normal file
View file

@ -0,0 +1,25 @@
window.onload = (event) => {
const btn = document.getElementById("theme-toggler");
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark");
} else if (currentTheme == "light") {
document.body.classList.toggle("light");
btn.classList.toggle("rotate-180");
}
btn.addEventListener("click", function () {
btn.classList.toggle("rotate-180");
var theme = "dark";
if (darkTheme.matches) {
document.body.classList.toggle("light");
theme = document.body.classList.contains("light") ? "light" : "dark";
} else {
document.body.classList.toggle("dark");
theme = document.body.classList.contains("dark") ? "dark" : "light";
}
localStorage.setItem("theme", theme);
});
}