sz-theme-manager v1.0.2

theme-manager

安装

安装组件：因为没有私服，采用远程tar包的方式安装

npm install https://10.30.26.223/sz2.0/theme-manager/repository/master/archive.tar --save

或者

pnpm add https://10.30.26.223/sz2.0/theme-manager/repository/master/archive.tar

基础样式集规则配置

请确保项目正确安装了tailwindcss相关依赖

创建tailwindcss配置文件

npx tailwindcss init -p 

在配置文件中引入样式集预设

// tailwind.config.js

const SZ_THEME = require('theme-manager');

module.exports = {
  presets: [SZ_THEME],
  //...其他配置
}

客户端使用

客户端用于在运行时定义和切换主题

说明：浅色/深色模式默认集成到组件中，无需单独定义

// 创建实例
import ThemeManager from 'theme-manager/lib';
const themeManager = new ThemeManager();
// 创建实例(单例)
import { getThemeManager } from 'theme-manager/lib';
const themeManager = new getThemeManager();

// 挂载到style标签中
themeManager.mount();

// 获取系统的主题色值
const color = themeManager.getThemeValue(colorKey /* color-text-black */, themeKey? /* 默认当前主题*/);

// 切换主题
themeManager.switchTheme(themeKey)

// 切换深色主题
themeManager.switchDark();

// 切换浅色主题
themeManager.switchLight();

// 重置为默认主题
themeManager.resetTheme();

// 获取主题map对象
themeManager.getThemeMap();

// 注册自定义主题，主题对象见说明
themeManager.registerTheme(themeKey, themeConfigMap)

// 监听主题变化
themeManager.on('theme-change', (key) => {
  // TODO
});

// 销毁组件
themeManager.destroy();

{
  "color": {
    "primary": {
      "100": "#E8F2FF",
      "200": "#CDDFF7",
      "300": "#9EC0F0",
      "400": "#72A3E8",
      "500": "#4887E0",
      "600": "#216DD9",
      "700": "#1554AD",
      "800": "#0C3D82",
      "900": "#ecf5ff",
      "1000": "#01132B",
      "DEFAULT": "#409eff"
    },
    "success": {
      "100": "#E8FFEA",
      "200": "#C7F0CA",
      "300": "#94E09A",
      "400": "#66D16F",
      "500": "#3EC249",
      "600": "#1BB327",
      "700": "#118F1C",
      "800": "#0A6B12",
      "900": "#f0f9eb",
      "1000": "#012404",
      "DEFAULT": "#67c23a"
    },
    "warning": {
      "100": "#FFF5E8",
      "200": "#F7E6CD",
      "300": "#F0CE9E",
      "400": "#E8B772",
      "500": "#E0A148",
      "600": "#D98B21",
      "700": "#AD6E15",
      "800": "#82510C",
      "900": "#fdf6ec",
      "1000": "#2B1A01",
      "DEFAULT": "#e6a23c"
    },
    "info": {
      "100": "#F5F5F5",
      "200": "#D6D6D6",
      "300": "#BABABA",
      "400": "#9E9E9E",
      "500": "#828282",
      "600": "#666666",
      "700": "#545454",
      "800": "#424242",
      "900": "#f4f4f5",
      "1000": "#1F1F1F",
      "DEFAULT": "#909399"
    },
    "danger": {
      "100": "#FFEAE8",
      "200": "#F7D1CD",
      "300": "#F0A59E",
      "400": "#E87C72",
      "500": "#E05548",
      "600": "#D93021",
      "700": "#AD2215",
      "800": "#82160C",
      "900": "#fef0f0",
      "1000": "#2B0501",
      "DEFAULT": "#f56c6c"
    },
    "background": {
      "page": "#F0F2F4",
      "fill": "#f0f2f5",
      "overlay": "#ffffff",
      "mask": "#2C3B52",
      "blank": "#FFFFFF",
      "DEFAULT": "#ffffff"
    },
    "nav": {
      "primary": "#0C284D",
      "second": "#031A38",
      "third": "#020E1F",
      "sub": "#1554AD"
    },
    "gray": {
      "100": "#F9F9F9",
      "200": "#F2F2F2",
      "300": "#E6E6E6",
      "400": "#D9D9D9"
    },
    "text": {
      "black": "#000000",
      "white": "#FFFFFF"
    },
    "black": "#000000",
    "white": "#FFFFFF"
  },
  "opacity": {
    "high": 1,
    "middle": 0.6,
    "low": 0.2,
    "lower": 0
  }
}