tonai / storybook-addon-themes

MIT License
83 stars 30 forks source link

Toolbar not appearing #47

Closed Nick-Mazuk closed 3 years ago

Nick-Mazuk commented 3 years ago

I'm trying to add the plugin to a Storybook for Svelte components, and unfortunately the themes toolbar is not appearing. As far as I can tell, I've setup everything correctly. I'm on Storybook 6.2.0-rc.9.

Screen Shot 2021-03-26 at 11 37 02 AM

Files

I'm setting it up the addon globally, so here's the main.js and preview.js files:

// main.js

module.exports =  {
    stories: ['../src/**/*.stories.svelte'],
    addons: [
        // '@storybook/addon-actions',
        { name: "@storybook/addon-essentials", options: { backgrounds: false, actions: false } },
        '@storybook/addon-links',
        '@storybook/addon-a11y',
        '@storybook/addon-postcss',
        '@storybook/addon-svelte-csf',
        '@storybook/addon-jest',
        'storybook-addon-themes',
        // 'storybook-dark-mode'
    ],
    webpackFinal: async (config) => {
        const svelteLoader = config.module.rules.find((r) => r.loader && r.loader.includes('svelte-loader'))
        svelteLoader.options.preprocess = require('svelte-preprocess')()
        return config
    },
}
// preview.js

export const globalTypes = {
    themes: {
        default: 'light',
        list: [
            {
                name: 'light',
                class: 'light',
                color: 'white',
            },
            {
                name: 'dark',
                class: 'dark',
                color: 'black',
            }
        ]
    }
};
tonai commented 3 years ago

Hello @Nick-Mazuk, you should not export themes for storybook-addon-themes in the globalTypes const but in the parameters. See https://github.com/tonai/storybook-addon-themes#globally

Nick-Mazuk commented 3 years ago

That works, thanks!