Update to prevent FOUC by injecting script

-> Manual testing: Everything working well

Author: mayank1513

lib/src/client/core/core.tsx

@@ -1,6 +1,7 @@
 import { COOKIE_KEY, DARK, LIGHT, MEDIA, SYSTEM, modes } from "../../constants";
 import { ColorSchemePreference, Store, useStore } from "../../utils";
 import { useEffect } from "react";
+import { s } from "./script";
 
 export interface CoreProps {
   /** force apply CSS transition property to all the elements during theme switching. E.g., `all .3s` */
@@ -54,20 +55,10 @@ export const Core = ({ t, nonce }: CoreProps) => {
   }, []);
 
   useEffect(() => {
-    const resolvedMode = mode === SYSTEM ? systemMode : mode;
     const restoreTransitions = modifyTransition(t, nonce);
-    const el = document.documentElement;
-    if (resolvedMode === DARK) el.classList.add(DARK);
-    else el.classList.remove(DARK);
-    [
-      ["sm", systemMode],
-      ["rm", resolvedMode],
-      ["m", mode],
-    ].forEach(([dataLabel, value]) => el.setAttribute(`data-${dataLabel}`, value));
+    u(mode, systemMode);
     restoreTransitions();
-    // System mode is decided by current system state and need not be stored in localStorage
-    localStorage.setItem(COOKIE_KEY, mode);
   }, [systemMode, mode, t, nonce]);
 
-  return null;
+  return <script dangerouslySetInnerHTML={{ __html: `(${s.toString()})('${COOKIE_KEY}')` }} />;
 };

lib/src/client/core/script.ts

@@ -0,0 +1,25 @@
+import { ColorSchemePreference, ResolvedScheme } from "../../utils";
+
+declare global {
+  var u: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
+}
+export const s = (storageKey: string) => {
+  const [SYSTEM, DARK] = ["system", "dark"] as const;
+  u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
+    const resolvedMode = mode === SYSTEM ? systemMode : mode;
+    const el = document.documentElement;
+    if (resolvedMode === DARK) el.classList.add(DARK);
+    else el.classList.remove(DARK);
+    [
+      ["sm", systemMode],
+      ["rm", resolvedMode],
+      ["m", mode],
+    ].forEach(([dataLabel, value]) => el.setAttribute(`data-${dataLabel}`, value));
+    // System mode is decided by current system state and need not be stored in localStorage
+    localStorage.setItem(storageKey, mode);
+  };
+  u(
+    (localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference,
+    matchMedia(`(prefers-color-scheme: ${DARK})`).matches ? DARK : "",
+  );
+};

lib/src/client/switch/switch.module.scss

@@ -26,7 +26,7 @@
   content: "A";
 }
 
-[data-rm="light"] .switch {
+[data-rm=""] .switch {
   box-shadow: 0 0 50px 10px yellow;
   background-color: yellow;
   border: 1px solid orangered;

lib/src/constants.ts

@@ -2,7 +2,7 @@ import { ColorSchemePreference } from "./utils";
 
 export const SYSTEM: ColorSchemePreference = "system";
 export const DARK: ColorSchemePreference = "dark";
-export const LIGHT: ColorSchemePreference = "light";
+export const LIGHT: ColorSchemePreference = "";
 
 export const COOKIE_KEY = "gx";
 export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT];

lib/src/utils.ts

@@ -1,8 +1,8 @@
 import useRGS from "r18gs";
 import { COOKIE_KEY, DARK, LIGHT, MEDIA, SYSTEM } from "./constants";
 
-export type ColorSchemePreference = "system" | "dark" | "light";
-export type ResolvedScheme = "dark" | "light";
+export type ColorSchemePreference = "system" | "dark" | "";
+export type ResolvedScheme = "dark" | "";
 export interface Store {
   m: ColorSchemePreference;
   s: ResolvedScheme;