docs: fix dark mode background flash (#2825)

marvinhagemeister · web-flow · commit d7c9ce9bc5e3 · 2025-02-17T10:43:59.000+01:00
Fixes #2823 (comment)
diff --git a/www/islands/ThemeToggle.tsx b/www/islands/ThemeToggle.tsx
@@ -1,27 +1,19 @@
-import { useEffect, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { IS_BROWSER } from "fresh/runtime";
 
 export default function ThemeToggle() {
-  const getPreferredTheme = () => {
+  const [theme, setTheme] = useState(() => {
     if (!IS_BROWSER) return "light";
-    const storedTheme = localStorage.getItem("theme");
-    if (storedTheme) return storedTheme;
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light";
-  };
-
-  const [theme, setTheme] = useState(getPreferredTheme);
-
-  useEffect(() => {
-    document.documentElement.classList.remove("light", "dark");
-    document.documentElement.classList.add(theme);
-    document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
-  }, [theme]);
+    return document.documentElement.dataset.theme ?? "light";
+  });
 
   const toggleTheme = () => {
-    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+    setTheme((prev) => {
+      const theme = prev === "light" ? "dark" : "light";
+      document.documentElement.setAttribute("data-theme", theme);
+      localStorage.setItem("theme", theme);
+      return theme;
+    });
   };
 
   return (
diff --git a/www/routes/_app.tsx b/www/routes/_app.tsx
@@ -3,7 +3,7 @@ import { define } from "../utils/state.ts";
 
 export default define.page(function App({ Component, state, url }) {
   return (
-    <html lang="en" class="dark" data-theme="dark">
+    <html lang="en">
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -23,6 +23,7 @@ export default define.page(function App({ Component, state, url }) {
           ? <meta property="og:image" content={state.ogImage} />
           : null}
         {state.noIndex ? <meta name="robots" content="noindex" /> : null}
+        <meta name="color-scheme" content="light dark" />
         <link
           rel="preload"
           href={asset("/fonts/FixelVariable.woff2")}
@@ -42,8 +43,17 @@ export default define.page(function App({ Component, state, url }) {
             </>
           )
           : null}
-        <script src="/theme.client.js"></script>
-        <script type="module" src="/theme-toggle.client.js"></script>
+        <script
+          type="module"
+          dangerouslySetInnerHTML={{
+            __html: `
+const isDarkMode = localStorage.theme === "dark"
+  || (!("theme" in localStorage)
+    && window.matchMedia("(prefers-color-scheme: dark)").matches);
+document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";`,
+          }}
+        >
+        </script>
       </head>
       <body>
         <Component />
diff --git a/www/static/styles.css b/www/static/styles.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 /* Light and dark theme variables */
-.light {
+:root {
   --fresh: 50deg, 100%, 56%;
   --fresh-green: 142deg, 71%, 29%;
 
@@ -17,7 +17,7 @@
 
   --info: 194deg, 76%, 41%;
 }
-.dark {
+html[data-theme="dark"]:root {
   --fresh: 50deg, 100%, 56%;
   --fresh-green: 142deg, 71%, 29%;
 
@@ -104,3 +104,11 @@ hr {
 .dark-mode-toggle-button img {
   @apply fill-foreground-primary;
 }
+
+::selection {
+  background-color: #b1d5ff;
+}
+
+html[data-theme="dark"] ::selection {
+  background-color: #064c9c;
+}
