fix edge cases

hyperweb-io · Sep 15, 2024 · 235cf4a · 235cf4a
1 parent b552134
commit 235cf4a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/packages/vue/stories/Box.stories.ts b/packages/vue/stories/Box.stories.ts
@@ -15,6 +15,7 @@ type Story = StoryObj<typeof Box>;
 export const Primary: Story = {
   args: {
     bg: "$background",
+    color: "$text",
     p: "$4",
     borderRadius: "$md",
     borderWidth: "1px",

diff --git a/src/helpers/style.ts b/src/helpers/style.ts
@@ -67,24 +67,28 @@ export const resolveThemeMode = (
   const hasHydrated = store.getState()._hasHydrated;
 
   // While in SSR, return a default theme
-  // TODO: document for package consumer to provide fallback UI using _hasHydrated to prevent flashing content
-  if (isSSR() || !hasHydrated) return "light";
+  if (isSSR() || !hasHydrated) {
+    return "light";
+  }
+
+  const savedTheme = store.getState().themeMode;
 
   if (isValidThemeMode(defaultThemeMode)) {
-    store.getState().setThemeMode(defaultThemeMode);
+    // Only set the theme if it's different from the saved theme
+    if (defaultThemeMode !== savedTheme) {
+      store.getState().setThemeMode(defaultThemeMode);
+    }
     return defaultThemeMode;
   }
 
   // props.defaultThemeMode is not provided or invalid, rely on persisted theme
-  const savedTheme = store.getState().themeMode;
-
   if (isValidThemeMode(savedTheme)) {
-    store.getState().setThemeMode(savedTheme);
     return savedTheme;
   }
 
   // persisted value not a valid theme mode, fallback to 'system'
   store.getState().setThemeMode("system");
+  console.log("[resolveThemeMode] using system theme mode");
   return "system";
 };
 

diff --git a/src/models/store.ts b/src/models/store.ts
@@ -155,13 +155,11 @@ export const store = createStore(
     })),
     {
       name: STORAGE_NAME,
-      // NOTE: this is a workaround for SSR frameworks like Next.js
-      // We need to call store.persist.rehydrate() ourselves
-      // More details: https://github.com/pmndrs/zustand/issues/938#issuecomment-1752885433
-      skipHydration: true,
-      onRehydrateStorage: () => (state) => {
-        state.setHasHydrated(true);
-        state.setThemeMode(state.themeMode);
+      onRehydrateStorage: (state) => {
+        return (persistedState) => {
+          state.setHasHydrated(true);
+          state.setThemeMode(persistedState.themeMode);
+        };
       },
       // Only choose to persist theme preference, ignore other state
       partialize: (state) => ({

diff --git a/src/ui/theme-provider/theme-provider.lite.tsx b/src/ui/theme-provider/theme-provider.lite.tsx
@@ -179,9 +179,12 @@ export default function ThemeProvider(props: ThemeProviderProps) {
   onMount(() => {
     state.isMounted = true;
 
-    // Dont set global theme mode if in controlled mode
+    // Resolve the theme mode
+    const resolvedThemeMode = resolveThemeMode(props.defaultTheme);
+
+    // Set the initial theme based on the resolved mode
     if (!state.isControlled) {
-      resolveThemeMode(props.defaultTheme);
+      store.getState().setThemeMode(resolvedThemeMode);
     }
 
     const darkListener = ({ matches }: MediaQueryListEvent) => {