search

hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
443 stars 56 forks source link

Add ability to set a dark/light class on the preview iframe #102

Closed jpzwarte closed 4 years ago

jpzwarte commented 4 years ago

See #101.

jpzwarte commented 4 years ago

This is my first attempt, haven't even tried to run it :)

jpzwarte commented 4 years ago

How do you test it? yarn build and then link it to a repo that uses storybook?

hipstersmoothie commented 4 years ago 
# in dark mode addon
yarn build
yarn link
# in root of your storybook project
yarn link storybook-dark-mode

And that should work

hipstersmoothie commented 4 years ago

Or if you rebase and fix the build a canary "test" version will be published for the PR

hipstersmoothie commented 4 years ago

:rocket: PR was released in v0.5.0 :rocket:

hipstersmoothie commented 4 years ago

Ah it slipped my mind what part of the UI you were adding this class to. I see now that it is the preview iframe. I actually will be making this an optional feature. Before this PR there has been a distinct separation between the storybook UIs dark mode and that of your components. The hooks were opt in way to style you components based on the dark mode of the UI. With this change that is no longer true and the plugin will try to render dark mode for the components.

My incoming PR will:

  1. make this feature an option
  2. add an option to add this class to the root of the storybook UI (what I wanted and thought was being contributed)