[RFC] Allow users to set a combination of light and dark themes #23459
MichaelArestad
started this conversation in
RFC
Replies: 3 comments 3 replies
-
Thanks a lot @MichaelArestad for putting this together. I would love to see this one work. I love to switch between dark and light mode but I also want to brand some of our Storybooks. |
Beta Was this translation helpful? Give feedback.
1 reply
-
This is a great idea. Would be extra-great if we could do it in a backwards-compatible way.
|
Beta Was this translation helpful? Give feedback.
1 reply
-
For context, this is currently possible to achieve with a code like this: // .storybook/manager.js
const getPreferredColorScheme = () => {
if (!globalThis || !globalThis.matchMedia) return 'light';
const isDarkThemePreferred = globalThis.matchMedia(
'(prefers-color-scheme: dark)'
).matches;
if (isDarkThemePreferred) return 'dark';
return 'light';
};
addons.setConfig({
theme: getPreferredColorScheme() === 'dark' ? darkTheme : lightTheme,
}); Demo: https://stackblitz.com/edit/github-xionxf?file=.storybook%2Fmanager.js&preset=node |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Status: in-review; championed by @MichaelArestad
Summary
A user can only set one theme to override the default themes and cannot declare a theme to use for dark mode. We should change theme declaration to explicitly set light and dark themes separately.
This was inspired by a recent discussion with @cdedreuille 🙌
Problem Statement
Implementation
I propose we change the theme declaration from one declaration to two:
This would allow a user to explicitly set themes and when they should be used. It would also allow them to disable dark mode by doing something like this:
Deliverables
theme
. I leave it to y'all to work this out.Beta Was this translation helpful? Give feedback.
All reactions