Updae tw-ssg example and test the changes -> everyhting ok except FOUC

mayank1513 · mayank1513 · commit 7cc8e7cccb9a · 2024-06-15T14:11:33.000+05:30
diff --git a/examples/tailwind-ssg/app/layout.tsx b/examples/tailwind-ssg/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={[inter.className, "bg-white dark:bg-black dark:text-white"].join(" ")}>
-        <Core t="background .3s" dp />
+        <Core t="background .3s" />
         {children}
       </body>
     </html>
diff --git a/examples/tailwind-ssg/tailwind.config.ts b/examples/tailwind-ssg/tailwind.config.ts
@@ -8,9 +8,6 @@ const config: Config = {
   ],
   theme: {},
   plugins: [],
-  darkMode: [
-    "variant",
-    ["@media (prefers-color-scheme: dark) { &:not(.light *) }", "&:is(.dark *)"],
-  ],
+  darkMode: "class",
 };
 export default config;
diff --git a/lib/src/client/core/core.tsx b/lib/src/client/core/core.tsx
@@ -38,7 +38,6 @@ const modifyTransition = (themeTransition = "none", nonce = "") => {
  */
 export const Core = ({ t, nonce }: CoreProps) => {
   const [{ m: mode, s: systemMode }, setThemeState] = useStore();
-  const resolvedMode = mode === SYSTEM ? systemMode : mode; // resolvedMode is the actual mode that will be used
 
   useEffect(() => {
     const media = matchMedia(MEDIA);
@@ -55,9 +54,11 @@ export const Core = ({ t, nonce }: CoreProps) => {
   }, []);
 
   useEffect(() => {
+    const resolvedMode = mode === SYSTEM ? systemMode : mode;
     const restoreTransitions = modifyTransition(t, nonce);
     const el = document.documentElement;
-    el.classList[resolvedMode === DARK ? "add" : "remove"](resolvedMode);
+    if (resolvedMode === DARK) el.classList.add(DARK);
+    else el.classList.remove(DARK);
     [
       ["sm", systemMode],
       ["rm", resolvedMode],
@@ -66,7 +67,7 @@ export const Core = ({ t, nonce }: CoreProps) => {
     restoreTransitions();
     // System mode is decided by current system state and need not be stored in localStorage
     localStorage.setItem(COOKIE_KEY, mode);
-  }, [resolvedMode, systemMode, mode, t, nonce]);
+  }, [systemMode, mode, t, nonce]);
 
   return null;
 };
