fix dark mode error

neuland · Jun 15, 2024 · 8199ccd · 8199ccd
1 parent 3dcf44f
commit 8199ccd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 19 deletions.
diff --git a/src/components/DarkModeToggle.astro b/src/components/DarkModeToggle.astro
@@ -1,5 +1,7 @@
 ---
+
 ---
+
 <mode-toggle class="flex">
   <button
     class="justify-self-end bg-black dark:bg-white ml-4 inline-flex h-6 w-11 items-center rounded-full"
@@ -21,24 +23,12 @@
 
 <script>
   function updateHTMLTheme(mode: "light" | "dark") {
-    const themeColorMetaTag = document.head.querySelector(
-      'meta[name="theme-color"]'
-    );
-
     if (mode === "dark") {
       document.documentElement.classList.remove("light");
       document.documentElement.classList.add("dark");
-      if (themeColorMetaTag) {
-        // @ts-ignore
-        themeColorMetaTag.content = "#262626";
-      }
     } else {
       document.documentElement.classList.remove("dark");
       document.documentElement.classList.add("light");
-      if (themeColorMetaTag) {
-        // @ts-ignore
-        themeColorMetaTag.content = "#ffffff";
-      }
     }
   }
   function updateStorageTheme(mode: "light" | "dark") {
@@ -107,6 +97,6 @@
   }
   .dark {
     transform: translateX(1.5rem);
-    background-color: #FF5A55;
+    background-color: #ff5a55;
   }
 </style>
diff --git a/src/layouts/ThemeScript.astro b/src/layouts/ThemeScript.astro
@@ -9,18 +9,13 @@
   (function () {
     if (typeof window !== "undefined") {
       const isSystemColorSchemeDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
+        "(prefers-color-scheme: dark)",
       ).matches;
       const storageTheme = sessionStorage.getItem("theme");
       if (!storageTheme && isSystemColorSchemeDark) {
         document.documentElement.classList.add("dark");
-        document.head.children.namedItem("theme-color").content = "#0f172a";
       } else if (storageTheme === "dark") {
         document.documentElement.classList.add("dark");
-        document.head.children.namedItem("theme-color").content = "#0f172a";
-      } else {
-        // we already server render light theme
-        document.head.children.namedItem("theme-color").content = "#ffffff";
       }
     }
   })();