Theme switcher does not work with latest Storybook versions

[yannickoo]

It seems like this addon is not working nicely together with the latest version of Storybook. With an older version of Storybook it was enough to add the themes option to the exported parameters object in .storybook/preview.js but now you need to use addParameters function to add the config properly.

.storybook/preview.js ⬇️

Before

export const parameters = {
  themes: {
    default: 'foo',
    list: [
      { name: 'foo', class: 'theme-foo', color: '#f00' },
      { name: 'bar', class: 'theme-bar', color: '#0f0' }
    ],
    clearable: false,
    onChange: (themeName) => {
      // …
    }
  }
}

After

import { addParameters } from '@storybook/web-components'

addParameters({
  themes: {
    default: 'foo',
    list: [
      { name: 'foo', class: 'theme-foo', color: '#f00' },
      { name: 'bar', class: 'theme-bar', color: '#0f0' }
    ],
    clearable: false,
    onChange: (themeName) => {
      // …
    }
  }
}

⚠️ Make sure that you import addParameters function from the right package, in my case it was @storybook/web-components.

---

Thanks to @darekkay who pointed to that here ➡️ https://github.com/tonai/storybook-addon-themes/issues/56#issuecomment-1014886927 🎉

I have created this issue to make it easier for other people to find this one

[jeremyzilar]

That was very helpful. I added some additional examples to that thread — https://github.com/tonai/storybook-addon-themes/issues/56#issuecomment-1199624624