Make whole html colour black

gurusabarish · Aug 25, 2024 · 17e92ca · 17e92ca
1 parent df24b51
commit 17e92ca
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -2,6 +2,7 @@
 <script>
     if (document.body.className.includes("dark")) {
         document.body.classList.remove('dark');
+        document.documentElement.classList.remove('dark');
         localStorage.setItem("pref-theme", 'light');
     }
 </script>
@@ -10,6 +11,7 @@
 {{- /* theme is dark */}}
 <script>
     if (document.body.className.includes("light")) {
+        document.documentElement.classList.add('dark');
         document.body.classList.add('dark');
         localStorage.setItem("pref-theme", 'dark');
     }
@@ -19,10 +21,13 @@
 {{- /* theme is auto */}}
 <script>
     if (localStorage.getItem("pref-theme") === "dark") {
+        document.documentElement.classList.add('dark');
         document.body.classList.add('dark');
     } else if (localStorage.getItem("pref-theme") === "light") {
         document.body.classList.remove('dark')
+        document.documentElement.classList.remove('dark');
     } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
         document.body.classList.add('dark');
     }
 
@@ -32,11 +37,14 @@
 {{- if (not .Site.Params.theme.disableThemeToggle) }}
 <script>
     document.getElementById("theme-toggle").addEventListener("click", () => {
+        console.log("hello")
         if (document.body.className.includes("dark")) {
             document.body.classList.remove('dark');
+            document.documentElement.classList.remove('dark');
             localStorage.setItem("pref-theme", 'light');
         } else {
             document.body.classList.add('dark');
+            document.documentElement.classList.add('dark');
             localStorage.setItem("pref-theme", 'dark');
         }
     })

diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
@@ -5,13 +5,16 @@
 
     switch (localStorageValue) {
         case "dark":
+            document.documentElement.classList.add('dark');
             document.body.classList.add('dark');
             break;
         case "light":
             document.body.classList.remove('dark');
+            document.documentElement.classList.remove('dark');
             break;
         default:
             if (mediaQuery) {
+                document.documentElement.classList.add('dark');
                 document.body.classList.add('dark');
             }
             break;