From 30e913f27745b5142c036763b8cc6033619c2978 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Thu, 19 Dec 2024 19:26:19 +0530
Subject: [PATCH 1/5] fix: peerDeps

---
 examples/nextjs/next-env.d.ts  |  1 +
 lib/package.json               |  4 ++--
 lib/src/client/core/core.tsx   | 37 +++++++++-------------------------
 lib/src/client/core/no-fouc.ts | 14 ++++++++++++-
 scripts/lite.js                |  2 +-
 5 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/examples/nextjs/next-env.d.ts b/examples/nextjs/next-env.d.ts
index 1b3be0840..3cd7048ed 100644
--- a/examples/nextjs/next-env.d.ts
+++ b/examples/nextjs/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/lib/package.json b/lib/package.json
index 47e7180e3..2f47be001 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -77,8 +77,8 @@
     "r18gs": "2.0.2"
   },
   "peerDependencies": {
-    "@types/react": "16.8 - 19",
-    "react": "16.8 - 19"
+    "@types/react": ">= 16.8",
+    "react": ">= 16.8"
   },
   "funding": [
     {
diff --git a/lib/src/client/core/core.tsx b/lib/src/client/core/core.tsx
index 65d451a8c..b3960dbb6 100644
--- a/lib/src/client/core/core.tsx
+++ b/lib/src/client/core/core.tsx
@@ -6,18 +6,20 @@ let media: MediaQueryList,
   updateDOM: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
 
 interface ScriptProps {
+  /** themeTransition */
+  t: string;
   /** nonce */
-  n?: string;
+  n: string;
   /** storageKey */
   k: string;
 }
 
 /** Avoid rerender of script */
-const Script = ({ n, k }: ScriptProps) => (
+const Script = ({ n, k, t }: ScriptProps) => (
   <script
     suppressHydrationWarning
     // skipcq: JS-0440
-    dangerouslySetInnerHTML={{ __html: `(${noFOUCScript.toString()})('${k}')` }}
+    dangerouslySetInnerHTML={{ __html: `(${noFOUCScript.toString()})('${[k, t, n]}')` }}
     nonce={n}
   />
 );
@@ -33,23 +35,6 @@ export interface CoreProps {
   k?: string;
 }
 
-/** Modify transition globally to avoid patched transitions */
-const modifyTransition = (themeTransition = "none", nonce = "") => {
-  const doc = document;
-  const css = doc.createElement("style");
-  /** split by ';' to prevent CSS injection */
-  css.textContent = `*,*:after,*:before{transition:${themeTransition.split(";")[0]} !important;}`;
-  css.setAttribute("nonce", nonce);
-  doc.head.appendChild(css);
-
-  return () => {
-    // Force restyle
-    getComputedStyle(doc.body);
-    // Wait for next tick before removing
-    setTimeout(() => doc.head.removeChild(css), 1);
-  };
-};
-
 /**
  *  The Core component wich applies classes and transitions.
  * Cookies are set only if corresponding ServerTarget is detected.
@@ -61,10 +46,10 @@ const modifyTransition = (themeTransition = "none", nonce = "") => {
  *
  * @source - Source code
  */
-export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
+export const Core = ({ t = "none", nonce = "", k = "o" }: CoreProps) => {
   const isWindowDefined = typeof window != "undefined";
   // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
-  if (isWindowDefined && !window.q) noFOUCScript(k);
+  if (isWindowDefined && !window.q) noFOUCScript(k, t, nonce);
 
   const [{ m, s }, setThemeState] = useStore();
 
@@ -80,11 +65,7 @@ export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
       e.key === k && setThemeState(state => ({ ...state, m: e.newValue as ColorSchemePreference }));
     });
   }
-  if (updateDOM) {
-    const restoreTransitions = modifyTransition(t, nonce);
-    updateDOM(m, s);
-    restoreTransitions();
-  }
+  updateDOM?.(m, s);
 
-  return <Script {...{ n: nonce, k }} />;
+  return <Script {...{ n: nonce, k, t }} />;
 };
diff --git a/lib/src/client/core/no-fouc.ts b/lib/src/client/core/no-fouc.ts
index 9849b831c..9455f988d 100644
--- a/lib/src/client/core/no-fouc.ts
+++ b/lib/src/client/core/no-fouc.ts
@@ -8,11 +8,18 @@ declare global {
 }
 
 /** function to be injected in script tag for avoiding FOUC */
-export const noFOUCScript = (storageKey: string) => {
+export const noFOUCScript = (storageKey: string, themeTransition: string, nonce: string) => {
   const [SYSTEM, DARK] = ["system", "dark"] as const;
   window.u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
     const resolvedMode = mode === SYSTEM ? systemMode : mode;
+    const doc = document;
     const el = document.documentElement;
+    const css = doc.createElement("style");
+    /** split by ';' to prevent CSS injection */
+    css.textContent = `*,*:after,*:before{transition:${themeTransition.split(";")[0]} !important;}`;
+    css.setAttribute("nonce", nonce);
+    doc.head.appendChild(css);
+
     if (resolvedMode === DARK) el.classList.add(DARK);
     else el.classList.remove(DARK);
     [
@@ -22,6 +29,11 @@ export const noFOUCScript = (storageKey: string) => {
     ].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);
+
+    // Force restyle
+    getComputedStyle(doc.body);
+    // Wait for next tick before removing
+    setTimeout(() => doc.head.removeChild(css), 1);
   };
   window.q = matchMedia(`(prefers-color-scheme: ${DARK})`);
   u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, q.matches ? DARK : "");
diff --git a/scripts/lite.js b/scripts/lite.js
index 78f31c518..5fb77ae14 100644
--- a/scripts/lite.js
+++ b/scripts/lite.js
@@ -7,7 +7,7 @@ const config = require("./rebrand.config.json");
 const packageJson = require("../lib/package.json");
 
 const ref = packageJson.name;
-packageJson.peerDependencies.r18gs = `${packageJson.dependencies.r18gs.split(".")[0]}`;
+packageJson.peerDependencies.r18gs = `>=${packageJson.dependencies.r18gs.split(".")[0]}`;
 delete packageJson.dependencies.r18gs;
 if (Object.keys(packageJson.devDependencies).length === 0) delete packageJson.devDependencies;
 packageJson.name = `${ref}-lite`;

From 9672d503cdcabc16e09abbfa7655d8d7e91f6e91 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Thu, 19 Dec 2024 19:31:04 +0530
Subject: [PATCH 2/5] fix test

---
 lib/src/client/core/core.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/client/core/core.test.tsx b/lib/src/client/core/core.test.tsx
index 8cdda1dbd..40bc0dde1 100644
--- a/lib/src/client/core/core.test.tsx
+++ b/lib/src/client/core/core.test.tsx
@@ -10,7 +10,7 @@ describe("theme-switcher", () => {
   afterEach(cleanup);
 
   beforeEach(() => {
-    noFOUCScript(STORAGE_KEY);
+    noFOUCScript(STORAGE_KEY, "none", "");
     render(<Core />);
   });
 

From 1b9879ee4d8b691a924765629fa65aff3f32d805 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Thu, 19 Dec 2024 19:39:02 +0530
Subject: [PATCH 3/5] fix: passing vars to script

---
 lib/src/client/core/core.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/src/client/core/core.tsx b/lib/src/client/core/core.tsx
index b3960dbb6..2318ba729 100644
--- a/lib/src/client/core/core.tsx
+++ b/lib/src/client/core/core.tsx
@@ -19,7 +19,9 @@ const Script = ({ n, k, t }: ScriptProps) => (
   <script
     suppressHydrationWarning
     // skipcq: JS-0440
-    dangerouslySetInnerHTML={{ __html: `(${noFOUCScript.toString()})('${[k, t, n]}')` }}
+    dangerouslySetInnerHTML={{
+      __html: `(${noFOUCScript.toString()})(${[k, t, n].map(v => `'${v}'`)})`,
+    }}
     nonce={n}
   />
 );

From f258df709b2f16073f5bccf984fdcb5cbc5b2fa4 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Thu, 19 Dec 2024 19:47:03 +0530
Subject: [PATCH 4/5] docs(changeset): Fix peerDeps

---
 .changeset/strange-walls-rescue.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/strange-walls-rescue.md

diff --git a/.changeset/strange-walls-rescue.md b/.changeset/strange-walls-rescue.md
new file mode 100644
index 000000000..b87655b38
--- /dev/null
+++ b/.changeset/strange-walls-rescue.md
@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": patch
+---
+
+Fix peerDeps

From 0d2526724a05e506eed6e88ce551caf61d29c70d Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Thu, 19 Dec 2024 19:48:43 +0530
Subject: [PATCH 5/5] just remove extra space

---
 lib/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/package.json b/lib/package.json
index 2f47be001..93969019d 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -77,8 +77,8 @@
     "r18gs": "2.0.2"
   },
   "peerDependencies": {
-    "@types/react": ">= 16.8",
-    "react": ">= 16.8"
+    "@types/react": ">=16.8",
+    "react": ">=16.8"
   },
   "funding": [
     {