fix: FOUC

Author: mayank1513

lib/package.json

@@ -67,7 +67,7 @@
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "r18gs": "^1.0.2"
+    "r18gs": "^1.1.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

lib/src/client/core/core.tsx

@@ -1,4 +1,4 @@
-import { COOKIE_KEY, DARK, LIGHT, SYSTEM, modes } from "../../constants";
+import { COOKIE_KEY, DARK, LIGHT, MEDIA, SYSTEM, modes } from "../../constants";
 import { ColorSchemePreference, Store, useStore } from "../../utils";
 import { useEffect } from "react";
 
@@ -41,17 +41,11 @@ export const Core = ({ t, nonce }: CoreProps) => {
   const resolvedMode = mode === SYSTEM ? systemMode : mode; // resolvedMode is the actual mode that will be used
 
   useEffect(() => {
-    const media = matchMedia(`(prefers-color-scheme: ${DARK})`);
+    const media = matchMedia(MEDIA);
     /** Updating media: prefers-color-scheme*/
     const updateSystemColorScheme = () =>
       setThemeState(state => ({ ...state, s: media.matches ? DARK : LIGHT }) as Store);
-    updateSystemColorScheme();
     media.addEventListener("change", updateSystemColorScheme);
-
-    setThemeState(state => ({
-      ...state,
-      m: (localStorage.getItem(COOKIE_KEY) ?? SYSTEM) as ColorSchemePreference,
-    }));
     /** Sync the tabs */
     const storageListener = (e: StorageEvent): void => {
       if (e.key === COOKIE_KEY)

lib/src/constants.ts

@@ -6,3 +6,5 @@ export const LIGHT: ColorSchemePreference = "light";
 
 export const COOKIE_KEY = "gx";
 export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT];
+
+export const MEDIA = `(prefers-color-scheme: ${DARK})`;

lib/src/utils.ts

@@ -1,5 +1,5 @@
 import useRGS from "r18gs";
-import { DARK, SYSTEM } from "./constants";
+import { COOKIE_KEY, DARK, LIGHT, MEDIA, SYSTEM } from "./constants";
 
 export type ColorSchemePreference = "system" | "dark" | "light";
 export type ResolvedScheme = "dark" | "light";
@@ -14,4 +14,12 @@ const DEFAULT_STORE_VAL: Store = {
 };
 
 /** local abstaction of RGS to avoid multiple imports */
-export const useStore = () => useRGS<Store>("ndm", DEFAULT_STORE_VAL);
+export const useStore = () =>
+  useRGS<Store>("ndm", () =>
+    typeof localStorage === "undefined"
+      ? DEFAULT_STORE_VAL
+      : {
+          m: (localStorage.getItem(COOKIE_KEY) ?? SYSTEM) as ColorSchemePreference,
+          s: (matchMedia(MEDIA).matches ? DARK : LIGHT) as ResolvedScheme,
+        },
+  );

lib/vitest.setup.ts

@@ -1,13 +1,14 @@
 import { vi } from "vitest";
 
+const mediaListeners: (() => void)[] = [];
 // mock matchMedia
 Object.defineProperty(window, "matchMedia", {
   writable: true,
   value: vi.fn().mockImplementation((query: string) => ({
     matches: query.includes(window.media),
     media: query,
-    onchange: null,
-    addEventListener: vi.fn(),
+    onchange: () => mediaListeners.forEach(listener => listener()),
+    addEventListener: (listener: () => void) => mediaListeners.push(listener),
     removeEventListener: vi.fn(),
     dispatchEvent: vi.fn(),
   })),

packages/shared/package.json

@@ -42,7 +42,7 @@
     "@repo/scripts": "workspace:*",
     "nextjs-darkmode": "workspace:*",
     "nextjs-themes": "^3.1.1",
-    "r18gs": "^1.0.2",
+    "r18gs": "^1.1.0",
     "react-live": "^4.1.6",
     "react18-loaders": "^1.1.1"
   },