Storybook: single dark/light theme toggle - #646
Open
n400 wants to merge 1 commit into
Open
Conversation
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
There was a problem hiding this comment.
Pull request overview
This PR streamlines Storybook theming by replacing the existing Theme dropdown/background controls with a single toolbar toggle that switches both the preview canvas and Docs pages between light and dark modes.
Changes:
- Added a custom Storybook manager toolbar tool to toggle light/dark and persist the selection via
globals. - Updated Storybook preview configuration to apply the selected theme by emulating
prefers-color-scheme, setting the canvas background token, and theming Docs via a customDocsContainer. - Disabled the essentials backgrounds addon to avoid conflicting/duplicated UI.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds explicit Storybook deps (@storybook/blocks, @storybook/theming) now imported directly. |
| package-lock.json | Locks dependency graph updates resulting from the new explicit Storybook deps. |
| .storybook/preview.js | Implements theme global, matchMedia emulation, canvas background painting, and themed Docs container. |
| .storybook/manager.js | Adds a single light/dark toolbar toggle powered by globals.theme. |
| .storybook/main.js | Disables essentials backgrounds to avoid conflict with the new theme toggle. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+20
to
+24
| if (typeof window !== "undefined" && window.location) { | ||
| const m = /[?&]globals=([^&]*)/.exec(window.location.search); | ||
| const pin = m && /(?:^|;)theme:(dark|light)/.exec(decodeURIComponent(m[1])); | ||
| if (pin) currentTheme = pin[1]; | ||
| } |
Comment on lines
+94
to
+96
| return { | ||
| matches: /dark/.test(query) ? wantsDark : !wantsDark, | ||
| media: query, |
Comment on lines
+6
to
+10
| // Docs pages don't run story decorators for their chrome — their background comes from a | ||
| // docs theme. Rather than touching Storybook's channel/event internals, the decorator below | ||
| // (which receives `context.globals.theme` through the documented API, and re-runs on every | ||
| // toggle) publishes the theme into this tiny module-level subscription for the docs container. | ||
| let currentTheme = "system"; |
Replaces the three-item Theme dropdown and the backgrounds-addon color picker with one toolbar button that switches the story canvas and Docs pages between light and dark by emulating prefers-color-scheme. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
n400
force-pushed
the
summer/storybook-theme-toggle
branch
from
July 29, 2026 15:19
d18ea86 to
13d4d85
Compare
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
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.
Summary
Replaces the three-item Theme dropdown and the backgrounds-addon color picker with a single
☀/☾ toolbar button that switches the whole preview — story canvas and Docs pages — between
light and dark.
.storybook/manager.js(new) — the toolbar toggle button..storybook/preview.js—themeglobal + a decorator that emulatesprefers-color-schemeby patching
window.matchMedia(components resolvecolorScheme="auto"from it), paints thecanvas via the semantic
--mdhui-background-color-1token, and themes Docs pages through acustom
DocsContainerfed by the decorator itself (which receivescontext.globalsthroughthe documented API) — no Storybook channel/event internals involved.
.storybook/main.js— disables the essentials backgrounds addon (its canvas-color pickerduplicated/conflicted with the theme button).
package.json—@storybook/blocksand@storybook/themingpromoted from transitive toexplicit devDependencies (they are now imported directly).
Caveats / things to know
first click; after that the pinned light/dark choice sticks and persists in the URL
(
&globals=theme:...), so a shared link carries the pin. A URL without that param followsthe OS again. There is deliberately no third "System" button state.
matchMediastub does not emit change events. Components in this repo read thescheme at render (and the toggle re-renders every story), so nothing is affected — but a
future component that subscribes via
matchMedia(...).addEventListener('change', …)wouldnot hear toolbar toggles.
addon). No story used
parameters.backgrounds.🤖 Generated with Claude Code