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( const toggleSwitch = document.querySelector(
'.darkmode-label input[type="checkbox"]' '.darkmode-label input[type="checkbox"]'
); );
const container = document.getElementById('darkmode-container');
toggleSwitch.checked = localStorage.getItem('darkmode') === 'true'; toggleSwitch.checked = localStorage.getItem('darkmode') === 'true';
function switchTheme(dark) { function switchTheme(dark) {
if (dark) { if (dark) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
container.classList.add("dark");
} else { } else {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
container.classList.remove("dark");
} }
localStorage.setItem('darkmode', dark); localStorage.setItem('darkmode', dark);

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

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