@checkstack/theme-frontend 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @checkstack/theme-frontend
 
+## 0.1.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
+
+- Updated dependencies [f6464a2]
+  - @checkstack/ui@0.2.3
+  - @checkstack/auth-frontend@0.4.1
+
 ## 0.1.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/theme-frontend",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/components/NavbarThemeToggle.tsx

@@ -12,7 +12,7 @@ import { Button, useTheme } from "@checkstack/ui";
  * Theme changes are saved to local storage via ThemeProvider.
  */
 export const NavbarThemeToggle = () => {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
   const authApi = useApi(authApiRef);
   const { data: session, isPending } = authApi.useSession();
 
@@ -26,7 +26,7 @@ export const NavbarThemeToggle = () => {
     return;
   }
 
-  const isDark = theme === "dark";
+  const isDark = resolvedTheme === "dark";
 
   const handleToggle = () => {
     const newTheme = isDark ? "light" : "dark";

package/src/components/ThemeToggleMenuItem.tsx

@@ -13,17 +13,17 @@ import { ThemeApi } from "@checkstack/theme-common";
  * Theme initialization is handled by ThemeSynchronizer component.
  */
 export const ThemeToggleMenuItem = () => {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
   const themeClient = usePluginClient(ThemeApi);
   const setThemeMutation = themeClient.setTheme.useMutation();
 
-  const [isDark, setIsDark] = useState(theme === "dark");
+  const [isDark, setIsDark] = useState(resolvedTheme === "dark");
   const toast = useToast();
 
   // Update local state when theme changes (e.g., from ThemeSynchronizer)
   useEffect(() => {
-    setIsDark(theme === "dark");
-  }, [theme]);
+    setIsDark(resolvedTheme === "dark");
+  }, [resolvedTheme]);
 
   const handleToggle = async (checked: boolean) => {
     const newTheme = checked ? "dark" : "light";