Skip to content

Commit 438b2d2

Browse files
committed
Fix Storybook theme switching persistence
- Apply theme to both document.documentElement and document.body - Wrap Story in div with data-theme attribute and background/foreground colors - Ensures theme persists and doesn't flash back to dark
1 parent a541e9f commit 438b2d2

File tree

1 file changed

+6
-2
lines changed

1 file changed

+6
-2
lines changed

.storybook/preview.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,17 @@ const preview: Preview = {
2323
const theme = context.globals.theme || "dark";
2424

2525
useEffect(() => {
26+
// Apply theme to document root
2627
document.documentElement.dataset.theme = theme;
28+
29+
// Also apply to body to ensure it persists
30+
document.body.dataset.theme = theme;
2731
}, [theme]);
2832

2933
return (
30-
<>
34+
<div data-theme={theme} style={{ minHeight: "100vh", backgroundColor: "var(--color-background)", color: "var(--color-foreground)" }}>
3135
<Story />
32-
</>
36+
</div>
3337
);
3438
},
3539
],

0 commit comments

Comments
 (0)