dark mode switch v1

This commit is contained in:
zoe 2022-04-09 21:42:12 +02:00
parent 8d93639193
commit 5eb64ef1e5
3 changed files with 77 additions and 11 deletions

View file

@ -1,23 +1,31 @@
$backgroundcolor: #ffe7d6;
$foregroundcolor: #73464c;
$linkcolor: #ab5675;
$active: #72dcbb;
$light-bg: #ffe7d6;
$light-fg: #73464c;
$light-ln: #ab5675;
$light-active: #72dcbb;
$dark-bg: black;
$dark-fg: white;
$dark-ln: blue;
$dark-active: green;
body {
background-color: $backgroundcolor;
color: $foregroundcolor;
&.light{
background-color: $light-bg;
color: $light-fg;
}
&.dark{
background-color: $dark-bg;
color: $dark-fg;
}
}
a {
background-color: $linkcolor;
color: $backgroundcolor;
}
a.footer-nav-item.active{
color: $linkcolor;
}
footer, footer a{
background-color: $foregroundcolor;
color: $backgroundcolor;
}

View file

@ -11,3 +11,4 @@
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>

57
static/js/darkmode.js Normal file
View file

@ -0,0 +1,57 @@
let DARKMODE = window.sessionStorage.getItem("darkmode");
const BUTTON = document.getElementById('darkmode-toggle');
const BODY = document.querySelector("body");
if (DARKMODE === null) {
askForPreferredTheme();
}
function askForPreferredTheme() {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
DARKMODE = true;
console.log("dark mode detected!")
}
else {
DARKMODE = false;
console.log("light mode detected!")
}
save_preferences();
}
function switchMode() {
DARKMODE = !DARKMODE;
save_preferences();
changeDisplay();
};
function changeDisplay() {
console.log(DARKMODE);
if (DARKMODE == true) {
switchToDark();
BUTTON.checked = true
}
else {
switchToLight();
BUTTON.checked = false
}
};
function switchToLight() {
console.log("switched to light");
BODY.classList.remove("dark");
BODY.classList.add("light");
}
function switchToDark() {
console.log("switched to dark");
BODY.classList.remove("light");
BODY.classList.add("dark");
}
function save_preferences() {
sessionStorage.setItem("darkmode", DARKMODE)
console.log("darkmode preferences saved: ", DARKMODE)
}
changeDisplay();
BUTTON.addEventListener("click", switchMode);