search

hipstersmoothie / storybook-dark-mode

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

How to do story integration in the case of `storybook/html`, no React or Theme? #79

Open monfera opened 4 years ago

monfera commented 4 years ago

The core functionality of toggling dark mode works great, thanks!

For story integration, the current README assumes CSS and React: it hinges on custom theme providers and the code example shows a React component that gets notified via a hook.

It would be great if stories knew if the current mode is light or dark mode, for example, as if it were a knob, irrespective of how the story responds (it may not be CSS - it may be a Canvas2d redraw) and what framework one is using (eg. none). Is it supported?

jpzwarte commented 4 years ago

Would #101 work for you (dark/light class on the preview iframe <body>)?

hipstersmoothie commented 4 years ago

I think it should solve this

hipstersmoothie commented 4 years ago

It does assume css though

hipstersmoothie commented 4 years ago

There are two ways to accomplish this

  1. stylePreview option (Thanks @jpzwarte!)
  2. Subscribing to the DARK_MODE event

Does the events API satisfy your needs?

enjoythelive1 commented 1 year ago

stylePreview seems to not be working

hipstersmoothie commented 1 year ago

PRs welcome!