chore: SW-2124 fix Storybook dark mode in autodocs (previews + docs chrome)#178
Open
boramyi-ts wants to merge 2 commits into
Open
chore: SW-2124 fix Storybook dark mode in autodocs (previews + docs chrome)#178boramyi-ts wants to merge 2 commits into
boramyi-ts wants to merge 2 commits into
Conversation
Autodocs pages rendered light regardless of the theme toggle: - withThemeByClassName only toggled `.dark` from a per-story decorator, which never runs for the autodocs page container, and fought any external sync (its useEffect re-derived light from each block's own globals). - autodocs renders each story block in an isolated iframe that loads with the default (light) globals. - the docs chrome (argstable, `table.category` rows, Controls widgets, code blocks) is emotion-styled from Storybook's docs theme object, which the design tokens / `.dark` class cannot reach. Fix: - Own the `.dark` class via a preview channel sync (globals + render events); register the theme toolbar via DecoratorHelpers instead of the fighting withThemeByClassName decorator. - Inherit the parent preview document's theme inside the isolated autodocs story iframes (same-origin), so embedded previews match the page. - Drive parameters.docs.container's DocsContainer theme from the same signal, reusing the existing tetra-science light/dark Storybook themes, so the docs chrome (incl. `table.category` rows and Controls widgets) follows too. Storybook tooling only; no change to shipped package output. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
boramyi-ts
temporarily deployed
to
artifactory-prod
July 15, 2026 14:53 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
Follow-up to the dark-mode Storybook fix, resolving self-review findings: - Reactive docs container: extract `ThemedDocsContainer`, which subscribes to theme globals via useState/useEffect instead of reading a module value once at render. The Docs chrome now re-themes on toggle even if Storybook doesn't re-render the container, and always reflects the latest theme on mount (fixes the re-render-dependency and initial-load ordering races). - Pre-paint theming: read the initial theme synchronously from the URL `globals` param and apply `.dark` at module load, avoiding a light flash before the first `setGlobals` event. - HMR cleanup: dispose the channel listeners via `import.meta.hot.dispose` so they don't accumulate on hot updates. - Drop `docs.story.inline: true` — it was a documented no-op under the global `layout: "fullscreen"`; the parent-theme inheritance already covers iframes. Verified: docs dark/light, live toggle re-themes chrome (incl. table.category), canvas dark, inline previews dark. lint + typecheck clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
boramyi-ts
temporarily deployed
to
artifactory-prod
July 15, 2026 15:23 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Coverage Report
File CoverageNo changed files found. |
boramyi-ts
enabled auto-merge (squash)
July 15, 2026 17:05
owilliams-tetrascience
approved these changes
Jul 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Makes Storybook render correctly in dark mode across canvas stories and autodocs pages — component previews, prose, the ArgsTable (incl.
table.categoryrows), Controls widgets, and code blocks.Addresses SW-2124 (part 2 — "ensure dark mode is properly represented in Storybook"). Also closes the gap flagged in a prior audit review: the docs theme wasn't synced to dark, so any component with a
table.categoryrow (or a Controls<select>/<textarea>) showed a white band on the otherwise-dark page.Why it was broken
Autodocs pages rendered light regardless of the theme toggle, for three reasons:
withThemeByClassNameonly toggles.darkfrom a per-story decorator, which never runs for the autodocs page container — and itsuseEffectre-derived light from each block's own globals, fighting any external sync.<iframe>that loads with the default (light) globals..darkclass can't reach.The fix (
.storybook/preview.ts).darkclass via a preview channel sync (globals + render events), mirroring the chrome sync already in.storybook/manager.ts. Register the theme toolbar viaDecoratorHelpers.initializeThemeStateinstead of the fightingwithThemeByClassNamedecorator.parameters.docs.container'sDocsContainertheme from the same signal, reusing the existingtetra-sciencelight/dark Storybook themes.Storybook tooling only — no change to the published package output.
Screenshots (theme set to dark)
Component preview (Alert Dialog docs)
Docs chrome — ArgsTable +
table.category+ Controls (TdpSearch docs)Testing
table.categoryrows + Controls all render dark ✅yarn lint(zero-warning) +yarn typecheckclean ✅🤖 Generated with Claude Code