Storybook: Unexpected automatic 'dark mode' in latest chrome? (Version 84.0.4124.1 (Official Build) canary (64-bit))

[rbutera]

I'm using Storybook on the latest chrome canary (Version 84.0.4124.1 (Official Build) canary (64-bit)) with no dark-mode addon installed.

For some reason storybook in this browser is dark, whereas in Brave and in regular Chrome it's light?

(To be clear, I want it to be light in all browsers).

Why might this be happening?

Screenshots

[yannbf]

Hey @rbutera, thanks for opening this issue. Can you, just in case, try it on incognito mode and see if it's still dark? Also, is there any chance you might have storybook-dark-mode in your project?

Lastly, could you please run the following command and paste the output here? npx -p @storybook/cli@next sb info

[rbutera]

@yannbf I don't have storybook-dark-mode in my project, no.

here is my environment info:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 13.13.0 - ~/.nvm/versions/node/v13.13.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.13.0/bin/npm
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 57.0.4
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18
    @storybook/addon-knobs: ^5.3.17 => 5.3.18
    @storybook/addon-links: ^5.3.18 => 5.3.18
    @storybook/addon-storyshots: ^5.3.17 => 5.3.18
    @storybook/addons: ^5.3.18 => 5.3.18
    @storybook/react: ^5.3.18 => 5.3.18

on Chrome 81 I don't have this issue. It's only on chrome canary (version 84)

I was about to write "I haven't tried incognito mode but I doubt that's the issue" but I've just tried it and weirdly it's in light mode!?

Is there a native dark mode toggle in storybook?

[yannbf]

@rbutera thanks for taking the effort to give more information! Well, Storybook does have a dark theme, however I am not sure about a toggle option. @shilman thoughts?

[shilman]

Before 6.0, themes were set in .storybook/preview.js using parameters. For performance reasons, we cached the themes in localStorage. Because of this, if you ran a Storybook on a specific port with a dark theme, and then ran a Storybook with NO theme on the same port, the second Storybook would also show up with the dark theme.

Starting in 6.0, themes are uncached and there is a different API for setting them in .storybook/manager.js, so this edge case problem should go away.

[syropian]

Hi, I noticed the same thing happening as well, using the Brave browser. We aren't using any kind of dark mode plugin, but when I change my _browser appearance_, Storybook seems to change its own appearance on refresh as well. Is there any way to disable this?

Edit: Just to clarify, there's nothing in localStorage that would dictate the theme, looks like its literally reading some kind of browser setting on load. This is on Storybook 5.3.18.

[shilman]

OK I'm wrong. Looks like Storybook is color scheme aware: https://github.com/storybookjs/storybook/pull/8271

What's the desired behavior on this?

I didn't test this, but it looks to me like Storybook uses the user-specified theme if available, otherwise automatically picks the theme based on the browser API if available, otherwise defaults to the "light" theme.

So if you want to force it to always use a light theme, just set your Storybook to the light theme, which seems reasonable to me. WDYT?

[rbutera]

Color scheme awareness is cool, but it should be able to be overridden as a toggle in the menu IMO.

As a user this feature is useful to be able to develop both light and dark themes but without the ability to toggle this on and off it's a little invasive

[yannbf]

@rbutera I agree it's nice to be able to toggle the theme while using storybook, but you're aware that the dark mode we are talking about is for Storybook and not the components you have built, right?
If you wanted to toggle theme for the components you're developing, that would depend on your implementation.

[rbutera]

If it was unclear: yes I am aware.

As Storybook is for both developers and designers (and everybody in between), it is often used by the former as a blank 'canvas' for component design.

I'm just saying that for this reason it is useful to have a light or dark backdrop that is aligned with the color of the browser's theme.

My initial thoughts when running into this 'bug' were:

"cool! this will be so useful when designing for dark mode! But right now I'm designing the light mode theme and I can't see my form input labels 😨"

[yannbf]

Hey @shilman what do you think should be the next steps here?
Should the Preview not have its styles influenced by Storybook theme, but rather by the users custom css/addon backgrounds if they want to?

Current version (you can picture the issue mentioned above):

Version where preview keeps a light background unless changed via addon-backgrounds:

[shilman]

If we install addon-backgrounds by default in 6.0 as part of essentials, does this problem go away? @yannbf

[yannbf]

Only partially, because it would require the users to use addon-backgrounds to just to be able to see their components which should be an easy experience out of the box IMHO. It would also only affect people who are either starting a new SB or using addon-essentials already, rather than everyone using storybook.

I'd say it's better to have it the other way around, where you don't have the styles applied by default, and a starter would come with light/dark backgrounds (where the values would match the storybook theme) to show that it's possible to change the background to set their themes.

Would be nice to have more points of view on this. Maybe let's check on the discord community (and if someone is reading this please chime in in the discussion!)

[rbutera]

Can we not just have a toggle in the menu for this behaviour?

[shilman]

@yannbf starting in 6.0 we will be installing essentials by default. that means users won't need to do anything to get backgrounds, they'll just be there. i don't mind fixing this issue in another way (config option?), but generally if we can address the issue with near-term product improvements we should be focusing on those, rather than increasing complexity to handle corner cases.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!