Storybook: Change theme to dark if user has dark mode enabled using prefers-color-scheme media query

[mohsen1]

Chrome and Safari will soon support the prefers-color-scheme media query. Let's respect that since Storybook has a dark theme already

Are you able to assist bring the feature to reality?
yes

[shilman]

@mohsen1 Any interest in building this? If you need any help getting started, please join our discord!

[mathiasrando]

It looks like this have stalled?

I'd like to help with this issue so I'll start working on an implementation.

[davidli3100]

@mathiasrando let me know if you aren't able to implement it. I've got a similar setup on my own projects I can adapt to storybook

[mathiasrando]

Thanks @davidli3100!

I'm actually done implementing it, but have had a hard time finding a good way to test it due to matchMedia not being implemented in JSDOM and therefore not really being able to change the matches value in the mock during the course of a test in create.test.js(already has tests for picking light as the default theme).

The issue seems to be that it's required to import it before any functions using it(https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom) and then overwriting it won't work.

I'll stick with adding tests for the new getPreferredColorScheme utility for now.

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.7 containing PR #8271 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[travi]

i upgraded to the latest pre-release for this ability, but it doesn't seem to work for me. My OS is set to dark mode, which works with other prefers-color-scheme situations, but i've also tried explicitly simulating through dev tools. did something regress?

i've pushed up a branch with my changes here if it helps provide context. npm start runs storybook for that project.

[shilman]

@mathiasrando can you help @travi out with this?

[mathiasrando]

That seems odd.

Things are a bit hectic at the moment, but I can take a look whenever I have an open slot.

What OS and browser are you using, @travi? It probably won't have an impact, but just to make sure 👍
And thanks for the branch.

[travi]

i'm using macOS Catalina and tested in both brave and chrome. i did clear local storage too, as mentioned in the referenced PR.

[mathiasrando]

I gave it a quick look last night and to sum up:

• Tests for the getPreferredColorScheme utility are passing
• The getPreferredColorScheme utility is working correctly(both with emulation and actual OS color sheme) with manual testing
• The applied theme never changes to dark

So I believe that the issue is related to the create method inside lib > theming > src > create.ts.
I think I'll be able to have a closer look today.

TLDR:
Some recent changes must have broken something related to applying the theme. I'll investigate further.

[mathiasrando]

The getInitialState in the context provider always gets the light theme. It makes sense since the light theme is the default, but it also causes ensureTheme(state.theme) to always convert the light theme instead of the default themes[getPreferredColorScheme()].

I'm still unsure why it has stopped working since it doesn't seem like the use of create, convert and ensure have changed. My initial guess is that this commit has something to do with it, but I honestly don't know the project well enough to be sure.

I guess the solution would be to ensure that ThemeVars uses the getPreferredColorScheme-method when setting the initial state in lib > api > src > index.tsx, but unfortunately I currently don't have a good suggestion for resolving the issue.