Skip to content

Sync Storybook frame theme with docs site dark/light mode#101

Merged
einari merged 1 commit into
mainfrom
feat/storybook-manager-theme-sync
Jun 12, 2026
Merged

Sync Storybook frame theme with docs site dark/light mode#101
einari merged 1 commit into
mainfrom
feat/storybook-manager-theme-sync

Conversation

@einari

@einari einari commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Added

  • Storybook manager UI (sidebar, toolbar) now automatically switches between dark and light themes to match the docs site theme toggle.
  • PrimeReact component themes inside stories also sync with the docs site theme, so components render in the correct light/dark palette when embedded.

- Add manager.js that reads docsSiteTheme from the URL param and applies
  themes.dark/light to the Storybook manager UI via addons.setConfig.
  On STORYBOOK_THEME_CHANGE postMessages from the docs site it reloads
  the frame with the updated URL so the UI theme takes effect immediately.
  On STORY_RENDERED it relays the current theme to the preview via channel.
- Fix preview.js to listen on the Storybook channel (addons.getChannel())
  instead of window.addEventListener, which never fires in the preview
  frame since postMessages from the parent page go to the manager frame.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@einari einari added the minor label Jun 12, 2026
@einari einari merged commit 9ea5b67 into main Jun 12, 2026
4 checks passed
@einari einari deleted the feat/storybook-manager-theme-sync branch June 12, 2026 12:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant