storybookjs/storybook
View on GitHub[Bug]: Overwriting HTML class to dark is not possible anymore
Open
#22,233 opened on Apr 24, 2023
bugbuilder-vitehelp wantedsev:S3vue3
Description
Describe the bug
I am currently trying to upgrade to Storybook 7 and noticed that my custom configuration for creating custom dark theme is not working anymore. My configuration below would swap between light and dark depending on the story params provided, by injecting the class into the html
preview.js
export const decorators = [(story, { parameters }) => {
const theme = parameters.theme || 'light';
const themeToAdd = theme === 'light' ? 'light' : 'dark';
const themeToRemove = theme === 'light' ? 'dark' : 'light';
const htmlElement = document.querySelector('html');
htmlElement.classList.add(themeToAdd);
htmlElement.classList.remove(themeToRemove);
return story();
}]
Story
import { useUserStore } from '@/store/user';
import OfflineView from '@/views/Offline.vue';
export default {
title: 'Views/Offline',
parameters: {
layout: 'centered',
},
};
const Template = (args) => ({
components: { OfflineView },
setup() { return { args }; },
template: '<offline-view />',
});
export const Default = Template.bind({});
export const DarkTheme = Template.bind({});
DarkTheme.parameters = { theme: 'dark' };
When this code was executed, I would get this kind of template:
But with Storybook 7, this is not working anymore. I've tried adding other classes, including light and it does get added to HTML. But only dark doesn't work. As can be seen below, class gets set, but it seems to be removed at some point by Storybook itself, which seems like a bug to me
To Reproduce
No response
System
Environment Info:
System:
OS: macOS 12.5
CPU: (8) arm64 Apple M2
Binaries:
Node: 19.9.0 - ~/.nvm/versions/node/v19.9.0/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 9.6.3 - ~/.nvm/versions/node/v19.9.0/bin/npm
Browsers:
Chrome: 112.0.5615.137
Firefox: 104.0.2
Safari: 15.6
npmPackages:
@storybook/addon-actions: 7.0.7 => 7.0.7
@storybook/addon-essentials: 7.0.7 => 7.0.7
@storybook/addon-interactions: ^7.0.7 => 7.0.7
@storybook/addon-links: 7.0.7 => 7.0.7
@storybook/testing-library: ^0.1.0 => 0.1.0
@storybook/vue3: 7.0.7 => 7.0.7
@storybook/vue3-vite: 7.0.7 => 7.0.7
Additional context
No response