stop flicker

apps/docs/package.json

@@ -36,7 +36,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "astro": "^4.5.5",
+    "astro": "^4.5.12",
     "astro-icon": "^1.1.0",
     "balance-text": "^3.3.1",
     "class-variance-authority": "^0.7.0",

apps/docs/src/components/layout/BaseHead.astro

@@ -18,6 +18,60 @@ const {
 } = Astro.props;
 ---
 
+<!-- inspiration https://github.com/withastro/astro/issues/8711#issue-1919938037 -->
+<script is:inline>
+  // Dark mode with prevent flickering flash between navigations
+  const disableAnimation = () => {
+    const css = document.createElement("style");
+    css.appendChild(
+      document.createTextNode(
+        `*{
+              -webkit-transition:none!important;
+              -moz-transition:none!important;
+              -o-transition:none!important;
+              -ms-transition:none!important;
+              transition:none!important
+              }`,
+      ),
+    );
+    document.head.appendChild(css);
+
+    return () => {
+      // Force restyle
+      (() => window.getComputedStyle(document.body))();
+
+      // Wait for next tick before removing
+      setTimeout(() => {
+        document.head.removeChild(css);
+      }, 1);
+    };
+  };
+
+  const setDarkMode = () => {
+    const theme = (() => {
+      if (
+        typeof localStorage !== "undefined" &&
+        localStorage.getItem("theme")
+      ) {
+        return localStorage.getItem("theme");
+      }
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+      return "light";
+    })();
+    if (theme === "light") {
+      document.documentElement.classList.remove("dark");
+    } else {
+      document.documentElement.classList.add("dark");
+    }
+    disableAnimation();
+    window.localStorage.setItem("theme", theme);
+  };
+  setDarkMode();
+  document.addEventListener("astro:after-swap", setDarkMode);
+</script>
+
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -55,32 +109,4 @@ const {
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<!-- Dark mode with prevent flickering flash between navigations -->
-<script is:inline>
-  const setDarkMode = () => {
-    const theme = (() => {
-      if (
-        typeof localStorage !== "undefined" &&
-        localStorage.getItem("theme")
-      ) {
-        return localStorage.getItem("theme");
-      }
-      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        return "dark";
-      }
-      return "light";
-    })();
-
-    if (theme === "light") {
-      document.documentElement.classList.remove("dark");
-    } else {
-      document.documentElement.classList.add("dark");
-    }
-    window.localStorage.setItem("theme", theme);
-  };
-
-  setDarkMode();
-  document.addEventListener("astro:after-swap", setDarkMode);
-</script>
-
 <ViewTransitions />