主题色: 一般就是修改 --xx-primary-xx 相关的颜色 对应到页面上 一般就是菜单的背景色 按钮的背景色 菜单字体颜色等. 一般不会太多

pure-admin的精简版中 主图色的设置

1. 配置

设置主题
{ color: "#ffffff", themeColor: "light" } //亮白色
定义css变量
html[data-theme="light"] {
  --pure-theme-sub-menu-active-text: #000000d9;
  --pure-theme-menu-bg: #fff;
  --pure-theme-menu-hover: #f6f6f6;
  // ...其他变量
}
对应UI组件使用css变量
.class {
  color: var(--pure-theme-menu-bg);
}

2. 切换

function setLayoutThemeColor(theme = getConfig().Theme ?? "light", isClick = true) {
  layoutTheme.value.theme = theme;
  document.documentElement.setAttribute("data-theme", theme);
  // 保存主题色到本地存储
  $storage.layout = {
    layout: layout.value,
    theme,
    darkMode: dataTheme.value,
    sidebarStatus: $storage.layout?.sidebarStatus,
    epThemeColor: $storage.layout?.epThemeColor,
    themeColor: isClick ? theme : storageThemeColor,
    overallStyle: overallStyle.value
  };
  // 设置 Element Plus 主题色
  if (theme === "default" || theme === "light") {
    setEpThemeColor(getConfig().EpThemeColor);
  } else {
    const colors = themeColors.value.find(v => v.themeColor === theme);
    setEpThemeColor(colors.color);
  }
}

使用pure-admin-theme插件后

核心还是先配置后使用

1. 配置

const themeColors = {
  /* 亮白色 */
  light: {
    subMenuActiveText: "#000000d9",
    menuBg: "#fff",
    menuHover: "#f6f6f6",
    subMenuBg: "#fff",
    subMenuActiveBg: "#e0ebf6",
    menuText: "rgb(0 0 0 / 60%)",
    sidebarLogo: "#fff",
    menuTitleHover: "#000",
    menuActiveBefore: "#4091f7"
  },
}
// 将配置转换为主题插件所需格式
export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
  const result = [] as multipleScopeVarsOptions[];
  Object.keys(themeColors).forEach(key => {
    result.push({
      scopeName: `layout-theme-${key}`,
      varsContent: `
        $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
        $menuBg: ${themeColors[key].menuBg} !default;
        $menuHover: ${themeColors[key].menuHover} !default;
        $subMenuBg: ${themeColors[key].subMenuBg} !default;
        $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
        $menuText: ${themeColors[key].menuText} !default;
        $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
      `
    });
  });
  return result;
};

2 在需要使用的地方调用

toggleTheme({
    scopeName: `layout-theme-${theme}`
  });

3.插件的配置

vite.config.ts
themePreprocessorPlugin({
   scss: {
     multipleScopeVars: genScssMultipleScopeVars(),
     extract: true
  }
}),