nova/kittygirl.online
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fight FOUC on darkmode toggle

Browse source
This commit is contained in:
nova ember madeline 2025-05-04 13:22:44 +02:00
parent 5a899f7df1
commit 80895088e6
2 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/_includes/partials/darktoggle.njk
View file

@ -18,17 +18,14 @@
const toggleSwitch = document.querySelector(
'.darkmode-label input[type="checkbox"]'
);
const container = document.getElementById('darkmode-container');
toggleSwitch.checked = localStorage.getItem('darkmode') === 'true';
function switchTheme(dark) {
if (dark) {
document.documentElement.classList.add("dark");
container.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
container.classList.remove("dark");
}
localStorage.setItem('darkmode', dark);

18
src/css/darkmode-toggle.css
View file

@ -40,7 +40,7 @@
overflow: hidden;
}
#darkmode-container.dark .darkmode-label {
.dark .darkmode-label {
border: var(--darkmode-toggle-border-width) solid var(--darkmode-tooggle-border-color-dark);
}
@ -55,7 +55,7 @@
transition: var(--darkmode-toggle-transition);
}
#darkmode-container.dark .darkmode-label::before {
.dark .darkmode-label::before {
opacity: 1;
}
@ -75,7 +75,7 @@
box-shadow: 0px 0px 11.7px 0px #FFC187, 0px 0px 20px 0px #ffc18768, -2px -2px 5px 0px #ffab5c inset;
}
#darkmode-container.dark .darkmode-sunmoon {
.dark .darkmode-sunmoon {
left: calc(100% - var(--darkmode-toggle-sunmoon-size) - var(--darkmode-toggle-switch-padding-x));
background-color: #dee5f3;
box-shadow: 0px 0px 51.7px 0px #dee5f3;
@ -92,7 +92,7 @@
transition: var(--darkmode-toggle-transition);
}
#darkmode-container.dark .darkmode-darkside {
.dark .darkmode-darkside {
background-color: #565c6b;
}
@ -131,23 +131,23 @@
}
#darkmode-container.dark .darkmode-cloud-1 {
.dark .darkmode-cloud-1 {
bottom: -35%;
left: -110px;
}
#darkmode-container.dark .darkmode-cloud-2 {
.dark .darkmode-cloud-2 {
bottom: -15%;
left: -110px;
transition: all 0.7s ease;
}
#darkmode-container.dark .darkmode-cloud-3 {
.dark .darkmode-cloud-3 {
bottom: -15%;
right: -110px;
}
#darkmode-container.dark .darkmode-cloud-4 {
.dark .darkmode-cloud-4 {
bottom: -5%;
right: -110px;
transition: all 0.7s ease;
@ -162,6 +162,6 @@
transition: var(--darkmode-toggle-transition);
}
#darkmode-container.dark .darkmode-stars {
.dark .darkmode-stars {
top: 70%;
}