storybook-dark-mode
storybook-dark-mode copied to clipboard
hipstersmoothie
Add ability to specify a class for the preview iframe <html>
Please add the ability to specify a class (dark for example) that gets added to the <html> of the preview iframe. This is similar to what https://github.com/tonai/storybook-addon-themes does.
Setting a class on the <html> is enough for me to add CSS that changes the CSS variables so my web components are also in dark mode.
See https://github.com/tonai/storybook-addon-themes/blob/master/src/manager/ThemeStory.tsx#L17 for the code that does this.
I actually need this for another project as well. I would be happy to accept a contribution for it as well <3
Do you have a suggestion on the config syntax?
So current it is:
addParameters({
darkMode: {
current: 'light',
light: ...,
dark: ...,
}
});
Should we make the class configurable? My guess is that if we hardcode to light and dark, somebody will come along and want to customize it.
How about this?
addParameters({
darkMode: {
current: 'light',
light: ...,
dark: ...,
lightClass: 'light',
darkClass: 'dark'
}
});
The above config is backwards compatible.
Hey there -- I'm trying to use these properties but the preview and manager keep using the default 'light' and 'dark' class names, not what I'm providing, per the docs. Is the add-on actually importing the user-defined classes here?
addParameters({
darkMode: {
darkClass: 'dark-theme',
lightClass: 'light-theme',
current: 'dark',
dark: myThemes.dark,
light: myThemes.light,
stylePreview: true,
}
});
Thanks! While the darkClass and lightClass props are now in localStorage, they still show the default values, not the classes I defined above.
Odd. If you make a PR I'll merge and release promptly! don't have the time right now to look at this