Fix default state and check for system color scheme

Author: mayank1513

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

@@ -1,8 +1,8 @@
 import useRGS from "r18gs";
 import type { SetStateAction } from "r18gs/use-rgs";
 import * as React from "react";
-import type { ColorSchemePreference, ThemeState } from "../../hooks/use-theme";
-import { DEFAULT_ID } from "../../constants";
+import type { ColorSchemePreference, ThemeState } from "../../constants";
+import { DEFAULT_ID, DEFAULT_THEME_STATE } from "../../constants";
 
 export interface ThemeSwitcherProps {
   /** id of target element to apply classes to. This is useful when you want to apply theme only to specific container. */
@@ -20,6 +20,7 @@ function useMediaQuery(setThemeState: SetStateAction<ThemeState>) {
     const updateSystemColorScheme = () => {
       setThemeState(state => ({ ...state, systemColorScheme: media.matches ? "dark" : "light" }));
     };
+    updateSystemColorScheme();
     media.addEventListener("change", updateSystemColorScheme);
     return () => {
       media.removeEventListener("change", updateSystemColorScheme);
@@ -103,7 +104,7 @@ function updateDOM({ targetId, themeState, dontSync }: UpdateDOMProps) {
 
 export function ThemeSwitcher({ targetId, dontSync, themeTransition }: ThemeSwitcherProps) {
   if (targetId === "") throw new Error("id can not be an empty string");
-  const [themeState, setThemeState] = useRGS<ThemeState>(targetId ?? DEFAULT_ID);
+  const [themeState, setThemeState] = useRGS<ThemeState>(targetId ?? DEFAULT_ID, DEFAULT_THEME_STATE);
 
   useMediaQuery(setThemeState);
 

lib/nthul/src/constants.ts

@@ -1,2 +1,16 @@
 /** shared constants -- keep in separate files for better tree-shaking and dependency injection */
 export const DEFAULT_ID = "nthul";
+
+export type ColorSchemePreference = "system" | "dark" | "light";
+
+export interface ThemeState {
+  colorSchemePreference: ColorSchemePreference;
+  systemColorScheme: "dark" | "light";
+  theme: string;
+}
+
+export const DEFAULT_THEME_STATE = {
+  colorSchemePreference: "system" as ColorSchemePreference,
+  systemColorScheme: "light" as "light" | "dark",
+  theme: "",
+};

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

@@ -1,19 +1,6 @@
 import useRGS from "r18gs";
-import { DEFAULT_ID } from "../constants";
-
-export type ColorSchemePreference = "system" | "dark" | "light";
-
-export interface ThemeState {
-  colorSchemePreference: ColorSchemePreference;
-  systemColorScheme: "dark" | "light";
-  theme: string;
-}
-
-const DEFAULT_THEME_STATE = {
-  colorSchemePreference: "system" as ColorSchemePreference,
-  systemColorScheme: "light" as "light" | "dark",
-  theme: "",
-};
+import type { ColorSchemePreference, ThemeState } from "../constants";
+import { DEFAULT_ID, DEFAULT_THEME_STATE } from "../constants";
 
 export interface UseTheme {
   theme: string;