You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using the config storyPreview: true the dark mode class is not applied to the canvas body tag when using the Storybook functionality to open the story in a new tab.
Result:
The text was updated successfully, but these errors were encountered:
Unfortunately, this bug seems to make the stylePreview: true setting incompatible with Chromatic's component views, which are also rendered in isolation. Chromatic relies heavily on isolated component renderings for its features.
I came up with a workaround for anyone interested! Create .storybook/preview-head.html and populate it with this code:
<script>/* ================================================= Manually apply dark/light mode class to target element if not already applied. Workaround for bug of storybook-dark-mode (stylePreview: true in isolated view). @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/173 =================================================== */window.addEventListener('DOMContentLoaded',()=>{constgetStore=()=>{conststoreJson=localStorage.getItem('sb-addon-themes-3');returnstoreJson ? JSON.parse(storeJson) : undefined;};conststore=getStore();consttarget=document.querySelector(store.classTarget);// Check if required dark/light class has NOT been applied to the target.if(target&&!target.classList.contains(store.current==='light' ? store.lightClass : store.darkClass)){// If absent, bug is occurring, so update classList and respond to local storage changes.constupdateTheme=()=>{constnewStore=getStore();if(newStore){target.classList.toggle(newStore.lightClass,newStore.current==='light');target.classList.toggle(newStore.darkClass,newStore.current==='dark');}};window.addEventListener('storage',updateTheme);updateTheme();}});</script>
Storybook 6.x, storybook-dark-mode 1.0.8
When using the config
storyPreview: true
the dark mode class is not applied to the canvasbody
tag when using the Storybook functionality to open the story in a new tab.Result:
The text was updated successfully, but these errors were encountered: