lharress
commented
3 years ago Had this problem as well, may not be the best solution, but I just used a global decorator;
(Story) => {
const isDarkMode = useDarkMode();
useEffect(() => {
if (!isDarkMode) {
return;
}
document.documentElement.classList.add("dark");
return () => {
document.documentElement.classList.remove("dark");
};
}, [isDarkMode]);
return <Story />;
},
hipstersmoothie
Hello, Thanks for this plugin, it works great!
There is one extra feature I'd like to have: add a dark class to the preview's element. Seems like this was requested in #101 and implemented in #102, but the implementation adds the class to the
element in the preview iframe. The reason I want it for is so body can also apply dark styles to itself if a parent element has.dark. In my case I use it with Tailwind CSS, where the dark mode will be applied if a parent element has the class.darkapplied. See docs for more information about this.Here are two pictures to better demonstrate this. This is the current state, when the class is applied to the body:
I added 
As you can see, on the top it will only apply the dark theme to the component, while on the bottom it will also be applied to the body.
class="dark"in the developer tools to the preview element:I tried it out by changing the line about body to select the html instead and it worked locally. What do you think about this? Could this be added? If yes, I can help with a PR if it's okay. In that case what should be the default: adding it to HTML or body. Or add a new option to specify this or other possibilities?