Open TazorDE opened 5 months ago
Hi, I was able to get Storybook global styles working using the following approach.
I used @storybook/addon-themes
and configured withThemeByDataAttribute
for switching the theme only, not for dark/light mode. Make sure to set parentSelector
and point it to body. Once I did that I was able to set the global theme using the selector.
For dark mode, I used the storybook-dark-mode
add-on, which you can see below I configured using darkMode: { stylePreview: true }
My config looks like this
import type { Preview, SvelteRenderer } from '@storybook/svelte';
import { withThemeByDataAttribute } from '@storybook/addon-themes';
import '../src/app.postcss';
const preview: Preview = {
parameters: {
darkMode: { stylePreview: true },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
},
decorators: [
withThemeByDataAttribute<SvelteRenderer>({
themes: {
skeleton: 'skeleton',
crimson: 'crimson',
modern: 'modern'
},
defaultTheme: 'skeleton',
parentSelector: 'body',
attributeName: 'data-theme'
})
]
};
export default preview;
@fattenap I've tested and confirmed this is working great in practice. Good find about the dark mode plugin. We'll use this instruction when generating the upcoming integration guide for Skeleton v3.
Note: we have more documentation incoming on this topic soon. But just noting the need for the CSF if you wish to document all Svelte components (including support for slots).
Describe the feature in detail (code, mocks, or screenshots encouraged)
In order to integrate Skeletons styles into the Storybook framework several steps need to be taken to apply the styles in Storybook.
Requirements to get it working:
@endigo9740 did a full test of the @storybook/addon-themes plugin. Unfortunately the results were mixed:
The integration guide will be based around how that pans out. If we can use the plugin, it'll be 1000x easier for most users. If not, then we may look to create a universal wrapper component (the Decorator) that implements this. For most Skeleton users they will need to be able to toggle mode/theme at will
If they stall or don't fix the plugin quickly though we'll likely consider building either a custom Decorator -or- a custom plugin that replicates the required features specifically for Skeleton's use case
(thank you @endigo9740 for doing the actual hard work so far)
What type of pull request would this be?
Docs
Provide relevant links or additional information.