use theme hook to get and set theme

Author: mayank1513

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

@@ -27,17 +27,17 @@ function useMediaQuery(setThemeState: SetStateAction<ThemeState>) {
 	}, [setThemeState]);
 }
 
-interface LoadSyncedStateProps extends ThemeSwitcherProps {
+export interface LoadSyncedStateProps extends ThemeSwitcherProps {
 	setThemeState: SetStateAction<ThemeState>;
 }
 
-function parseState(str?: string | null) {
-	const [theme, colorSchemePreference, systemColorScheme] = (str ?? ",system,light").split(",") as [
+function parseState(str?: string | null): ThemeState {
+	const parts = (str ?? ",system,light").split(",") as [
 		string,
 		ColorSchemePreference,
 		"light" | "dark",
 	];
-	return { theme, colorSchemePreference, systemColorScheme };
+	return { theme: parts[0], colorSchemePreference: parts[1], systemColorScheme: parts[2] };
 }
 
 function useLoadSyncedState({ dontSync, targetId, setThemeState }: LoadSyncedStateProps) {
@@ -76,7 +76,7 @@ function modifyTransition(themeTransition = "none") {
 	};
 }
 
-interface UpdateDOMProps {
+export interface UpdateDOMProps {
 	targetId?: string;
 	themeState: ThemeState;
 }
@@ -113,6 +113,7 @@ export function ThemeSwitcher({ targetId, dontSync, themeTransition }: ThemeSwit
 
 	useLoadSyncedState({ dontSync, targetId, setThemeState });
 
+	/** update DOM and storage */
 	React.useEffect(() => {
 		const restoreTransitions = modifyTransition(themeTransition);
 		const shoulCreateCookie = updateDOM({ targetId, themeState });

lib/nthul/src/hooks/use-theme.ts

@@ -0,0 +1,41 @@
+import useRGS from "r18gs";
+
+export type ColorSchemePreference = "system" | "dark" | "light";
+
+export interface ThemeState {
+	colorSchemePreference: ColorSchemePreference;
+	systemColorScheme: "dark" | "light";
+	theme: string;
+}
+
+export const DEFAULT_ID = "nthul";
+
+export const DEFAULT_THEME_STATE = {
+	colorSchemePreference: "system" as ColorSchemePreference,
+	systemColorScheme: "light" as "light" | "dark",
+	theme: "",
+};
+
+export interface UseTheme {
+	theme: string;
+	colorSchemePreference: ColorSchemePreference;
+	systemColorScheme: "dark" | "light";
+	resolvedColorScheme: "dark" | "light";
+	setColorSchemePreference: (colorSchemePreference: ColorSchemePreference) => void;
+	setTheme: (theme: string) => void;
+}
+
+export function useTheme(id?: string): UseTheme {
+	const [themeState, setState] = useRGS<ThemeState>(id ?? DEFAULT_ID, DEFAULT_THEME_STATE);
+	const { colorSchemePreference: csp, systemColorScheme: scs } = themeState;
+	return {
+		...themeState,
+		resolvedColorScheme: csp === "system" ? scs : csp,
+		setColorSchemePreference: (colorSchemePreference: ColorSchemePreference) => {
+			setState({ ...themeState, colorSchemePreference });
+		},
+		setTheme: (theme: string) => {
+			setState({ ...themeState, theme });
+		},
+	};
+}