refactor: optimize theme script to prevent render-blocking (#601)

* refactor: optimize theme script to prevent render-blocking - Move theme script from `public/` to `src/scripts/` - Split into minimal inline script (FOUC prevention) + external script (non-blocking) - Rename `primaryColorScheme` to `initialColorScheme` - Rename `toggle-theme.js` to `theme.ts` - Use TypeScript for theme script - Update docs for theme customization
2026-08-14 11:29:33 +08:00 · 2026-01-10 07:26:25 +07:00
parent 25d25437cf
commit 5bb8e405bb
6 changed files with 182 additions and 103 deletions
@@ -0,0 +1,114 @@
+// Constants
+const THEME = "theme";
+const LIGHT = "light";
+const DARK = "dark";
+
+// Initial color scheme
+// Can be "light", "dark", or empty string for system's prefers-color-scheme
+const initialColorScheme = "";
+
+function getPreferTheme(): string {
+  // get theme data from local storage (user's explicit choice)
+  const currentTheme = localStorage.getItem(THEME);
+  if (currentTheme) return currentTheme;
+
+  // return initial color scheme if it is set (site default)
+  if (initialColorScheme) return initialColorScheme;
+
+  // return user device's prefer color scheme (system fallback)
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? DARK
+    : LIGHT;
+}
+
+// Use existing theme value from inline script if available, otherwise detect
+let themeValue = window.theme?.themeValue ?? getPreferTheme();
+
+function setPreference(): void {
+  localStorage.setItem(THEME, themeValue);
+  reflectPreference();
+}
+
+function reflectPreference(): void {
+  document.firstElementChild?.setAttribute("data-theme", themeValue);
+
+  document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
+
+  // Get a reference to the body element
+  const body = document.body;
+
+  // Check if the body element exists before using getComputedStyle
+  if (body) {
+    // Get the computed styles for the body element
+    const computedStyles = window.getComputedStyle(body);
+
+    // Get the background color property
+    const bgColor = computedStyles.backgroundColor;
+
+    // Set the background color in <meta theme-color ... />
+    document
+      .querySelector("meta[name='theme-color']")
+      ?.setAttribute("content", bgColor);
+  }
+}
+
+// Update the global theme API
+if (window.theme) {
+  window.theme.setPreference = setPreference;
+  window.theme.reflectPreference = reflectPreference;
+} else {
+  window.theme = {
+    themeValue,
+    setPreference,
+    reflectPreference,
+    getTheme: () => themeValue,
+    setTheme: (val: string) => {
+      themeValue = val;
+    },
+  };
+}
+
+// Ensure theme is reflected (in case body wasn't ready when inline script ran)
+reflectPreference();
+
+function setThemeFeature(): void {
+  // set on load so screen readers can get the latest value on the button
+  reflectPreference();
+
+  // now this script can find and listen for clicks on the control
+  document.querySelector("#theme-btn")?.addEventListener("click", () => {
+    themeValue = themeValue === LIGHT ? DARK : LIGHT;
+    window.theme?.setTheme(themeValue);
+    setPreference();
+  });
+}
+
+// Set up theme features after page load
+setThemeFeature();
+
+// Runs on view transitions navigation
+document.addEventListener("astro:after-swap", setThemeFeature);
+
+// Set theme-color value before page transition
+// to avoid navigation bar color flickering in Android dark mode
+document.addEventListener("astro:before-swap", event => {
+  const astroEvent = event;
+  const bgColor = document
+    .querySelector("meta[name='theme-color']")
+    ?.getAttribute("content");
+
+  if (bgColor) {
+    astroEvent.newDocument
+      .querySelector("meta[name='theme-color']")
+      ?.setAttribute("content", bgColor);
+  }
+});
+
+// sync with system changes
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", ({ matches: isDark }) => {
+    themeValue = isDark ? DARK : LIGHT;
+    window.theme?.setTheme(themeValue);
+    setPreference();
+  });