Integration: Storybook about skeleton HOT 4 OPEN

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;

from skeleton.

@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.

from skeleton.

Reference: https://discord.com/channels/1003691521280856084/1025279710609014805/1226418235079917629

from skeleton.

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).

• https://github.com/storybookjs/addon-svelte-csf

from skeleton.