-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Change theme to dark if user has dark mode enabled using prefers-color-scheme media query #6088
Comments
@mohsen1 Any interest in building this? If you need any help getting started, please join our discord! |
It looks like this have stalled? I'd like to help with this issue so I'll start working on an implementation. |
@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 |
Thanks @davidli3100! I'm actually done implementing it, but have had a hard time finding a good way to test it due to 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 |
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 Closing this issue. Please re-open if you think there's still more to do. |
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 i've pushed up a branch with my changes here if it helps provide context. |
@mathiasrando can you help @travi out with this? |
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 👍 |
i'm using macOS Catalina and tested in both brave and chrome. i did clear local storage too, as mentioned in the referenced PR. |
I gave it a quick look last night and to sum up:
So I believe that the issue is related to the TLDR: |
The I'm still unsure why it has stopped working since it doesn't seem like the use of I guess the solution would be to ensure that |
Hi, is anyone working on it? i am new to open source, how do i get started? |
Is this still an issue? as I see a PR has been merged. |
It's been merged and works perfectly in the 7.0 alpha release! |
I am in the process of migrating from Storybook 6 to 7, and in that process I've just spent a couple of hours trying to figure out why all my storybooks suddenly went dark mode. If the Storybook theme follows whatever mode is set on the OS/Browser level, that should also be mentioned in the documentation. |
@jonniebigodes that sounds like an documentation issue, would you be able to pick that up? |
@ndelangen Sure, thanks for letting me know of this. Appreciate it 🙏 |
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
The text was updated successfully, but these errors were encountered: