@checkstack/ui 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @checkstack/ui
 
+## 0.2.3
+
+### Patch Changes
+
+- f6464a2: Fix theme toggle showing incorrect state when system theme is used
+
+  - Added `resolvedTheme` property to `ThemeProvider` that returns the actual computed theme ("light" or "dark"), resolving "system" to the user's OS preference
+  - Updated `NavbarThemeToggle` and `ThemeToggleMenuItem` to use `resolvedTheme` instead of `theme` for determining toggle state
+  - Changed default theme from "light" to "system" so non-logged-in users respect their OS color scheme preference
+
 ## 0.2.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/ThemeProvider.tsx

@@ -10,11 +10,20 @@ interface ThemeProviderProps {
 
 interface ThemeProviderState {
   theme: Theme;
+  /** The actual resolved theme ("light" or "dark"), accounting for system preference */
+  resolvedTheme: "light" | "dark";
   setTheme: (theme: Theme) => void;
 }
 
+const getSystemTheme = (): "light" | "dark" => {
+  return globalThis.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
 const initialState: ThemeProviderState = {
   theme: "system",
+  resolvedTheme: "light",
   setTheme: () => {
     // Will be implemented by provider
   },
@@ -29,29 +38,23 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   ...props
 }) => {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
   );
 
+  // Compute the resolved theme (what's actually displayed)
+  const resolvedTheme: "light" | "dark" =
+    theme === "system" ? getSystemTheme() : theme;
+
   useEffect(() => {
     const root = globalThis.document.documentElement;
 
     root.classList.remove("light", "dark");
-
-    if (theme === "system") {
-      const systemTheme = globalThis.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
+    root.classList.add(resolvedTheme);
+  }, [resolvedTheme]);
 
   const value = {
     theme,
+    resolvedTheme,
     setTheme: (newTheme: Theme) => {
       localStorage.setItem(storageKey, newTheme);
       setTheme(newTheme);