Open quantizor opened 2 years ago
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', () => {
const getStore = () => {
const storeJson = localStorage.getItem('sb-addon-themes-3');
return storeJson ? JSON.parse(storeJson) : undefined;
};
const store = getStore();
const target = 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.
const updateTheme = () => {
const newStore = 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: