From 80895088e6aad0ead797f29a2196c980bc60f362 Mon Sep 17 00:00:00 2001
From: nova ember madeline <nova.r@mailbox.org>
Date: Sun, 4 May 2025 13:22:44 +0200
Subject: [PATCH] fight FOUC on darkmode toggle

---
 src/_includes/partials/darktoggle.njk |  3 ---
 src/css/darkmode-toggle.css           | 18 +++++++++---------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/_includes/partials/darktoggle.njk b/src/_includes/partials/darktoggle.njk
index d93fbc8..c662a39 100644
--- a/src/_includes/partials/darktoggle.njk
+++ b/src/_includes/partials/darktoggle.njk
@@ -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);
diff --git a/src/css/darkmode-toggle.css b/src/css/darkmode-toggle.css
index fcc2eb6..dc5e43e 100644
--- a/src/css/darkmode-toggle.css
+++ b/src/css/darkmode-toggle.css
@@ -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%;
 }
\ No newline at end of file