[Bug]: Overwriting HTML class to dark is not possible anymore
#22.233 aberto em 24 de abr. de 2023
Métricas do repositório
- Stars
- (89.909 estrelas)
- Métricas de merge de PR
- (Mesclagem média 7d 22h) (184 fundiu PRs em 30d)
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