fix: hydration issues (#99)

Co-authored-by: Hunter Johnston <johnstonhuntera@gmail.com> Co-authored-by: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
svecosystem · Nov 19, 2024 · 7f6fa59 · 7f6fa59
1 parent bcc6a70
commit 7f6fa59
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/.changeset/cuddly-cherries-exercise.md b/.changeset/cuddly-cherries-exercise.md
@@ -0,0 +1,5 @@
+---
+"mode-watcher": patch
+---
+
+fix: hydration issues 
diff --git a/packages/mode-watcher/src/lib/mode-watcher.svelte b/packages/mode-watcher/src/lib/mode-watcher.svelte
@@ -78,19 +78,10 @@
 		<meta name="theme-color" content={themeColors.dark} />
 	{/if}
 
-	{#if trueNonce}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags prefer-template -->
-		{@html `<script nonce=${trueNonce}>(` +
-			setInitialMode.toString() +
-			`)(` +
-			JSON.stringify(initConfig) +
-			`);</script>`}
-	{:else}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags prefer-template -->
-		{@html `<script>(` +
-			setInitialMode.toString() +
-			`)(` +
-			JSON.stringify(initConfig) +
-			`);</script>`}
-	{/if}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags, prefer-template -->
+	{@html `<script${trueNonce ? ` nonce=${trueNonce}` : ""}>(` +
+		setInitialMode.toString() +
+		`)(` +
+		JSON.stringify(initConfig) +
+		`);</script>`}
 </svelte:head>
diff --git a/packages/mode-watcher/src/lib/mode.ts b/packages/mode-watcher/src/lib/mode.ts
@@ -53,10 +53,12 @@ export function setInitialMode({
 	darkClassNames = ["dark"],
 	lightClassNames = [],
 	defaultTheme = "",
+	modeStorageKey,
+	themeStorageKey,
 }: SetInitialModeArgs) {
 	const rootEl = document.documentElement;
-	const mode = localStorage.getItem("mode-watcher-mode") || defaultMode;
-	const theme = localStorage.getItem("mode-watcher-theme") || defaultTheme;
+	const mode = localStorage.getItem(modeStorageKey) || defaultMode;
+	const theme = localStorage.getItem(themeStorageKey) || defaultTheme;
 	const light =
 		mode === "light" ||
 		(mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches);
@@ -81,10 +83,10 @@ export function setInitialMode({
 
 	if (theme) {
 		rootEl.setAttribute("data-theme", theme);
-		localStorage.setItem("mode-watcher-theme", theme);
+		localStorage.setItem(themeStorageKey, theme);
 	}
 
-	localStorage.setItem("mode-watcher-mode", mode);
+	localStorage.setItem(modeStorageKey, mode);
 }
 
 export {