feat: replace current dark mode detector logic by new component

src/components/BaseHead.astro

@@ -4,6 +4,7 @@ import SourceSansPro700 from "@fontsource/source-sans-pro/files/source-sans-pro-
 // import { pwaInfo } from "virtual:pwa-info";
 import { ClientRouter } from "astro:transitions";
 import { WEBMENTION_URL } from "astro:env/server";
+import SetColorMode from "@components/SetColorMode.astro";
 
 export interface Title {
   title: string;
@@ -41,38 +42,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, seo } = Astro.props as SeoProps & Title;
 ---
 
-<!-- Block until theme class is set -->
-<script>
-  /**
-   * Check if dark theme is preferred or set by user
-   */
-  const isDarkTheme = (): string | boolean | null => {
-    if (typeof localStorage !== "undefined" && localStorage.getItem("darkMode")) {
-      return localStorage.getItem("darkMode");
-    }
-    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "true";
-    }
-    return "false";
-  };
-
-  /**
-   * Set dark theme class
-   */
-  const setDarkClass = () => {
-    const htmlClasses = document.documentElement.classList;
-
-    if (isDarkTheme() === "false") {
-      htmlClasses.remove("dark");
-    } else {
-      htmlClasses.add("dark");
-    }
-  };
-
-  setDarkClass();
-
-  document.addEventListener("astro:after-swap", setDarkClass);
-</script>
+<SetColorMode />
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />

src/components/SetColorMode.astro

@@ -0,0 +1,56 @@
+---
+
+---
+
+<!-- Block until theme class is set -->
+<script is:inline>
+  /**
+   * Check if dark theme is preferred or set by user
+   */
+  const isDarkTheme = () => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("darkMode")) {
+      return localStorage.getItem("darkMode");
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "true";
+    }
+    return "false";
+  };
+
+  /**
+   * Set dark theme class
+   */
+  const setDarkClass = () => {
+    const htmlClasses = document.documentElement.classList;
+
+    if (isDarkTheme() === "false") {
+      htmlClasses.remove("dark");
+    } else {
+      htmlClasses.add("dark");
+    }
+  };
+
+  /**
+   * Update meta theme color.
+   *
+   * @return  {void}
+   */
+  const setThemeColor = () => {
+    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    const themeColor = isDarkTheme() === "true" ? "#2b333b" : "#fad0b0";
+    metaThemeColor.setAttribute("content", themeColor);
+  };
+
+  /**
+   * Needs to be set on load because theme-color meta tag comes later in the loading sequence
+   */
+  window.onload = function () {
+    setThemeColor();
+  };
+
+  setDarkClass();
+
+  localStorage.setItem("darkMode", isDarkTheme());
+
+  document.addEventListener("astro:after-swap", setDarkClass);
+</script>