mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
dark mode switch v1
This commit is contained in:
parent
8d93639193
commit
5eb64ef1e5
3 changed files with 77 additions and 11 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
57
static/js/darkmode.js
Normal 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);
|
Loading…
Reference in a new issue