theme-utils-zhy

示例

//导入
import { ThemeProvider } from "theme-utils-zhy";
import MyComponent from "@/components/MyComponent";

const customTheme = {
  "primary-color": "#FF5733",
  "secondary-color": "#33FF57",
  "background-color": "#3333FF",
  "text-color": "#FFFFFF",
};

const App = () => {
  return (
    <ThemeProvider initialTheme={customTheme}>
      <MyComponent />
    </ThemeProvider>
  );
};

export default App;

//MyComponent组件 案例
import React from "react";
import { useTheme } from "@theme-utils-zhy";
const MyComponent: React.FC = () => {
  const { theme, setTheme } = useTheme();
  /**
   * 切换主题色
   */
  const handleChangeTheme = () => {
    setTheme({
      "primary-color": "#01fc09ff",
      "secondary-color": "#3c453dff",
      "background-color": "#0d0d0dff",
      "text-color": "#ff1010ff",
    });
  };
  return (
    <div style={{ background: theme.backgroundColor, color: theme.textColor }}>
      <div style={{ backgroundColor: "var(--secondary-color)" }}>
        测试本地css变量
      </div>
      <h1 onClick={handleChangeTheme} style={{ color: theme.primaryColor }}>
        切换主题色
      </h1>
    </div>
  );
};

export default MyComponent;

ThemeProvider

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | ------------------------ | ---- | ------ | ------------------- | | initialTheme | Record<string, string> | 否 | {} | 自定义 CSS 变量色板 |