You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I noticed that the initial mode (light or dark) is hard set using current:.
This means that if a user has their prefered color scheme set to dark but it is set to light using current: Storybook will still render in light mode before being changed by the user.
My solution to detect the users prefered color scheme is:
// .storybook/preview.js
import { themes } from "@storybook/theming"
// Detect if users preferred color scheme is dark
const isDark =
typeof window !== `undefined`
? window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
: null
export const parameters = {
darkMode: {
// Set initial theme based on users preferred color scheme
current: isDark ? "dark" : "light",
I wanted to share this solution incase it helps anyone else out.
But also wanted to check if anyone has any better solution they could share?
or if this could somehow be added to the addon?
The text was updated successfully, but these errors were encountered:
@nikkipantony Would you be willing to submit a PR? In my mind if the user changes it back to system settings from then on it should match system settings
I addressed a related matter in this fix. I opted not to utilize the OS color schema over current prop because I believe it's important for us to maintain a bit of control over the color scheme of our Storybook, rather than totally relying on the user's preferences. This decision ensures that we can serve the Storybook with the specific schema we desire
I noticed that the initial mode (
light
ordark
) is hard set usingcurrent:
.This means that if a user has their prefered color scheme set to
dark
but it is set tolight
usingcurrent:
Storybook will still render inlight
mode before being changed by the user.My solution to detect the users prefered color scheme is:
I wanted to share this solution incase it helps anyone else out.
But also wanted to check if anyone has any better solution they could share?
or if this could somehow be added to the addon?
The text was updated successfully, but these errors were encountered: