storybook-dark-mode icon indicating copy to clipboard operation
storybook-dark-mode copied to clipboard

Published 20 hours ago • verified publisher icon hipstersmoothie

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

Open monfera opened this issue 5 years ago • 6 comments

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?

monfera avatar Jan 15 '20 14:01 monfera

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

jpzwarte avatar May 20 '20 08:05 jpzwarte

I think it should solve this

hipstersmoothie avatar May 20 '20 16:05 hipstersmoothie

It does assume css though

hipstersmoothie avatar May 20 '20 16:05 hipstersmoothie

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?

hipstersmoothie avatar May 20 '20 23:05 hipstersmoothie

stylePreview seems to not be working

enjoythelive1 avatar Oct 04 '22 17:10 enjoythelive1

PRs welcome!

hipstersmoothie avatar Dec 05 '22 20:12 hipstersmoothie