Storybook с поддержкой нескольких тем на базе tailwind классов

Для реализации поддержки нескольких тем в приложении мне понравилась стратегия завести дополнительные классы в конфиге tailwind. По сути, эти классы являются css переменными. В моем приложении, при переключении тем, их значение перезаписывает js скрипт. Компоненты UI завязываются на эти переменные и, таким образом, происходит удобная смена темы, без какого-либо особого участия react. Мне не приходится заводить такую сущность как ThemeProvider, прокидывать текущее значение темы через пропсы, проверять ее значение в каждом компоненте через typesProps. В общем, мне кажется такая архитектура здорово экономит время. Но теперь возник вопрос как такую поддержку тем нужно тестировать в storybook? Хотелось бы, чтобы он умел иллюстрировать как ведет себя компонент с каждой конкретной темой, но пока не очень понимаю, как динамически менять свойства css стилей именно для storybook кита. Поскольку сам компонент не привязан ни к каким переменным и пришит к конкретным кастомным css классам.

Мой текущий конфиг tailwind:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      primary: "var(--theme-primary)",
      "primary-light": "var(--theme-primary-light)",
      "primary-dark": "var(--theme-primary-dark)",
      secondary: "var(--theme-secondary)",
      "secondary-light": "var(--theme-secondary-light)",
      "secondary-dark": "var(--theme-secondary-dark)",
      negative: 'var(--theme-negative)',
      "negative-light": 'var(--theme-negative-light)',
      "negative-dark": 'var(--theme-negative-dark)',
      positive: 'var(--theme-positive)',
      "positive-light": 'var(--theme-positive-light)',
      "positive-dark": 'var(--theme-positive-dark)',
      'primary-background': 'var(--theme-background-primary)',
      'primary-background-light': 'var(--theme-background-primary-light)',
      'primary-background-dark': 'var(--theme-background-primary-dark)',
      'secondary-background': 'var(--theme-background-secondary)',
      'secondary-background-light': 'var(--theme-background-secondary-light)',
      'secondary-background-dark': 'var(--theme-background-secondary-dark)',
      'primary-text': 'var(--theme-text-primary)',
      'primary-text-light': 'var(--theme-text-primary-light)',
      'primary-text-dark': 'var(--theme-text-primary-dark)',
      'secondary-text': 'var(--theme-text-secondary)',
      'secondary-text-light': 'var(--theme-text-secondary-light)',
      'secondary-text-dark': 'var(--theme-text-secondary-dark)',
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}