新增切换主题

yangyin

2024-12-11 4c173b743e256132e27096d38f8c9d436c13ee45

 src/utils/theme.ts

@@ -1,5 +1,5 @@
import { ElMessage } from 'element-plus';

import { genMixColor } from './gen-color'
/**
 * 颜色转换函数
 * @method hexToRgb hex 颜色转 rgb 颜色
@@ -61,3 +61,88 @@
      getLightColor,
   };
}
// 主题配置类型定义
export type Theme = {
   // 这里留出可拓展空间（如banner图，背景图，文案，标题等），将主题色嵌套在对象内
   colors: {
      primary?: string;
      info?: string;
      warning?: string;
      success?: string;
      danger?: string;
   };
};

// 默认主题配置
export const defaultThemeConfig: Theme = {
   colors: {
      primary: '#FF6A00',
      info: '#eeeeee',
      warning: '#fbbd23',
      danger: '#f87272',
      success: '#36d399',
   },
};

// 本地缓存 key
const THEME_KEY = 'theme';

// 获取本地缓存主题
export const getTheme = (): Theme => {
   const theme = localStorage.getItem(THEME_KEY);
   return theme ? JSON.parse(theme) : defaultThemeConfig;
};

// 设置主题
export const setTheme = (data = defaultThemeConfig) => {
   const oldTheme = getTheme();

   // 将传入配置与旧的主题合并，以填补缺省的值
   data = Object.assign({}, oldTheme, data);

   // 将缓存到浏览器
   localStorage.setItem(THEME_KEY, JSON.stringify(data));

   // TODO:将主题更新到css变量中，使之生效
   updateThemeColorVar(data);
};


// ...

// 设置css变量
function setStyleProperty(propName: string, value: string) {
   document.documentElement.style.setProperty(propName, value);
}

// 更新主题色到css变量
function updateThemeColorVar({ colors }: Theme) {
   // 遍历当前主题色，生成混合色，并更新到css变量（tailwind + elementPlus）
   for (const brand in colors) {
      updateBrandExtendColorsVar(
         colors[brand as keyof Theme['colors']] as string,
         brand
      );
   }

   function updateBrandExtendColorsVar(color: string, name: string) {
      // TODO:生成混合色
      const { DEFAULT, dark, light } = genMixColor(color);
      // 每种主题色由浅到深分为五个阶梯以供开发者使用。
      setStyleProperty(`--${name}-lighter-color`, light[5]);
      setStyleProperty(`--${name}-light-color`, light[3]);
      setStyleProperty(`--${name}-color`, DEFAULT);
      setStyleProperty(`--${name}-deep-color`, dark[2]);
      setStyleProperty(`--${name}-deeper-color`, dark[4]);

      // elementPlus主题色更新
      setStyleProperty(`--el-color-${name}`, DEFAULT);
      setStyleProperty(`--el-color-${name}-dark-2`, dark[2]);
      setStyleProperty(`--el-color-${name}-light-3`, light[3]);
      setStyleProperty(`--el-color-${name}-light-5`, light[5]);
      setStyleProperty(`--el-color-${name}-light-7`, light[7]);
      setStyleProperty(`--el-color-${name}-light-8`, light[8]);
      setStyleProperty(`--el-color-${name}-light-9`, light[9]);
   }
}