FIX theme toggle
This commit is contained in:
parent
bfccca3b45
commit
553285c04b
9 changed files with 111 additions and 34 deletions
|
@ -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
25
static/js/theme.js
Normal 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);
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue