Storybook：无法在UI上更改主题颜色

1. 在项目根目录下，创建一个名为“.storybook”的文件夹。在其中创建一个名为“preview.js”的文件。

2. 在“preview.js”文件中添加以下代码：

import { addDecorator } from '@storybook/react';
import { withThemes } from 'storybook-styled-components';

const themes = {
  light: {
    primaryColor: '#007bff',
    backgroundColor: '#ffffff'
  },
  dark: {
    primaryColor: '#007bff',
    backgroundColor: '#212121'
  }
};

addDecorator(withThemes(themes));

这里使用了“storybook-styled-components”模块，以添加对主题支持的自定义修饰器。

3. 然后，在“preview.js”中，定义所需的主题对象。主题对象是一个包含具有控制颜色和样式的属性的对象。

4. 完成后，可以使用用于切换主题的按钮使用上述主题：

import React from 'react';
import { Button } from '@storybook/react/demo';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button primary>Primary Button</Button>;

Primary.parameters = {
  themes: {
    default: 'light',
    list: [
      { name: 'light', class: '', color: '#007bff' },
      { name: 'dark', class: 'dark', color: '#007bff' },
    ],
  },
};

在这里，我们设置了两个主题“light”和“dark”，每个主题都有不同的背景和主要颜色。 “Primary”方法有一个“Primary Button”的按钮，它使用默认主题“light”。

5. 然后添加一个切换主题的按钮：

import React from 'react';
import { Button } from '@storybook/react/demo';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => (
  <div>
    <Button primary>Primary Button</Button>
    <Button
      onClick={() => {
        const theme =