zent/src/theme/demos/02.dynamic.md

一套前端设计语言和基于React的实现

---
order: 3
zh-CN:
  title: 动态更新主题色
  prompt: '主题色已更新'
en-US:
  title: Dynamic update theme color
  prompt: 'Theme color has been update'
---

```jsx
import { ColorPicker, Notify } from 'zent';
import { ThemeSdk, ThemeScene } from '@zent/theme-sdk';
import ThemeCssVars from 'zent/theme-css-vars.json';
import { useState } from 'react';

const { generateTheme, applyTheme } = ThemeSdk;

const colors = [
  '#ed6a18',
  '#ed9f18',
  '#edd418',
  '#bad415',
  '#5bd415',
  '#15d48e',
  '#15bad4',
  '#155bd4',
  '#412ad4',
  '#8e15d4',
  '#d415ba',
  '#d42f15',
];

const colorScene = [
  ThemeScene.DefaultHoverBackgroundColor,
  ThemeScene.PrimaryHoverBackgroundColor,
  ThemeScene.PrimaryBackgroundColor,
  ThemeScene.PrimaryActiveBackgroundColor
];

const ThemeSdkComponent = () => {
  const [color, setColor] = useState('#155bd4');

  const onChangeComplete = hex => {
    const theme = generateTheme({ colors: [{ baseColor: hex, scene: colorScene }] }, ThemeCssVars);
    applyTheme(theme);

    setColor(hex);

    Notify.success('{i18n.prompt}');
  };

  return (
    <>
      <ColorPicker color={color} type="simple" onChange={onChangeComplete} presetColors={colors} />
      <span className="demo-theme-base-color">{color}</span>
    </>
  );
}

ReactDOM.render(<ThemeSdkComponent />, mountNode);
```