touch up

Author: mayank1513

lib/nthul/src/client/theme-switcher/theme-switcher.tsx

@@ -79,15 +79,17 @@ function modifyTransition(themeTransition = "none") {
 export interface UpdateDOMProps {
 	targetId?: string;
 	themeState: ThemeState;
+	dontSync?: boolean;
 }
 
-function updateDOM({ targetId, themeState }: UpdateDOMProps) {
+function updateDOM({ targetId, themeState, dontSync }: UpdateDOMProps) {
 	const { theme, colorSchemePreference: csp, systemColorScheme: scs } = themeState;
 	const resolvedColorScheme = csp === "system" ? scs : csp;
+	const key = targetId ?? DEFAULT_ID;
 	// update DOM
 	let shoulCreateCookie = false;
-	const target = document.getElementById(targetId ?? DEFAULT_ID);
-	shoulCreateCookie = target?.getAttribute("data-nth") === "next";
+	const target = document.getElementById(key);
+	shoulCreateCookie = !dontSync && target?.getAttribute("data-nth") === "next";
 
 	/** do not update documentElement for local targets */
 	const targets = targetId ? [target] : [target, document.documentElement];
@@ -102,7 +104,8 @@ function updateDOM({ targetId, themeState }: UpdateDOMProps) {
 		t?.classList.add(resolvedColorScheme);
 	});
 
-	return shoulCreateCookie;
+	if (shoulCreateCookie)
+		document.cookie = `${key}=${theme},${resolvedColorScheme}; max-age=31536000; SameSite=Strict;`;
 }
 
 export function ThemeSwitcher({ targetId, dontSync, themeTransition }: ThemeSwitcherProps) {
@@ -116,16 +119,13 @@ export function ThemeSwitcher({ targetId, dontSync, themeTransition }: ThemeSwit
 	/** update DOM and storage */
 	React.useEffect(() => {
 		const restoreTransitions = modifyTransition(themeTransition);
-		const shoulCreateCookie = updateDOM({ targetId, themeState });
+		updateDOM({ targetId, themeState, dontSync });
 		if (!dontSync) {
 			// save to localStorage
 			const { theme, colorSchemePreference: csp, systemColorScheme: scs } = themeState;
 			const stateToSave = [theme, csp, scs].join(",");
 			const key = targetId ?? DEFAULT_ID;
 			localStorage.setItem(key, stateToSave);
-			if (shoulCreateCookie) {
-				document.cookie = `${key}=${stateToSave}; max-age=31536000; SameSite=Strict;`;
-			}
 		}
 		restoreTransitions();
 	}, [dontSync, targetId, themeState, themeTransition]);

lib/nthul/src/server/server-target/server-target.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { cookies } from "next/headers";
 import { DEFAULT_ID } from "../../constants";
-import type { ColorSchemePreference } from "../../hooks/use-theme";
 
 interface ServerTargetProps {
 	tag?: keyof JSX.IntrinsicElements;
@@ -10,21 +9,18 @@ interface ServerTargetProps {
 
 /**
  * # ServerTarget
- * --todo 
+ * --todo
  * update comments
  * create colorswitch
  * update examples
  */
 export function ServerTarget({ tag, targetId }: ServerTargetProps) {
 	const key = targetId || DEFAULT_ID;
-	const [theme, csp, scs] = (cookies().get(key)?.value ?? ",system,light").split(",") as [
-		string,
-		ColorSchemePreference,
-		"dark" | "light",
-	];
+	const val = cookies().get(key)?.value ?? ",light";
+	const [theme, cs] = val.split(",") as [string, "dark" | "light"];
 
-	const cls = `th-${theme} ${csp === "system" ? scs : csp}`;
+	const cls = `th-${theme} ${cs}`;
 
 	const Tag = tag ?? "div";
-	return <Tag className={cls} data-nth="next" id={targetId ?? DEFAULT_ID} />;
+	return <Tag className={cls} data-nth="next" id={key} />;
 }

lib/nthul/touchup.js

@@ -46,7 +46,10 @@ fs.writeFileSync(
 	JSON.stringify(packageJson, null, 2),
 );
 
-fs.copyFileSync(path.resolve(__dirname, "..", "..", "README.md"), path.resolve(__dirname, "dist", "README.md"));
+fs.copyFileSync(
+	path.resolve(__dirname, "..", "..", "README.md"),
+	path.resolve(__dirname, "dist", "README.md"),
+);
 
 const dirs = [path.resolve(__dirname, "dist")];