refactor: ♻️ 自定义主题色，参考arco.design主题色值修改主色

.stylelintrc.cjs

@@ -44,7 +44,7 @@ module.exports = {
     "at-rule-no-unknown": [
       true,
       {
-        ignoreAtRules: ["apply", "use"],
+        ignoreAtRules: ["apply", "use", "forward"],
       },
     ],
   },

src/components/IconSelect/index.vue

@@ -201,7 +201,7 @@ onClickOutside(iconSelectRef, () => (popoverVisible.value = false), {
   }
 
   .icon-item:hover {
-    border-color: #409eff;
+    border-color: #4080ff;
     scale: 1.2;
   }
 }

src/layout/components/Settings/components/ThemeColorPicker.vue

@@ -15,7 +15,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 // 定义颜色预设
 const colorPresets = [
-  "#409EFF",
+  "#4080FF",
   "#ff4500",
   "#ff8c00",
   "#90ee90",

src/settings.ts

@@ -18,7 +18,7 @@ const defaultSettings: AppSettings = {
   theme: mediaQueryList.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT,
   size: SizeEnum.DEFAULT,
   language: LanguageEnum.ZH_CN,
-  themeColor: "#409EFF",
+  themeColor: "#4080FF",
   watermarkEnabled: false,
   watermarkContent: pkg.name,
 };

src/store/modules/settings.ts

@@ -1,68 +1,50 @@
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
-import Color from "color";
+import { generateThemeColors, applyTheme, toggleDarkMode } from "@/utils/theme";
 
 type SettingsValue = boolean | string;
 
 export const useSettingsStore = defineStore("setting", () => {
-  // 是否显示设置
+  // 基本设置
   const settingsVisible = ref(false);
-  // 是否显示标签视图
+  // 标签
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
-  // 是否显示侧边栏logo
+  // 侧边栏 Logo
   const sidebarLogo = useStorage<boolean>(
     "sidebarLogo",
     defaultSettings.sidebarLogo
   );
-  // 是否固定头部
+  // 固定头部
   const fixedHeader = useStorage<boolean>(
     "fixedHeader",
     defaultSettings.fixedHeader
   );
-  // 布局模式：left-左侧模式(默认) top-顶部模式 mix-混合模式
+  // 布局
   const layout = useStorage<string>("layout", defaultSettings.layout);
-  // 主题颜色
-  const themeColor = useStorage<string>(
-    "themeColor",
-    defaultSettings.themeColor
-  );
-  // 主题：light-亮色(默认) dark-暗色
-  const theme = useStorage<string>("theme", defaultSettings.theme);
-  // 是否开启水印
+  // 水印
   const watermarkEnabled = useStorage<boolean>(
     "watermarkEnabled",
     defaultSettings.watermarkEnabled
   );
 
+  // 主题
+  const themeColor = useStorage<string>(
+    "themeColor",
+    defaultSettings.themeColor
+  );
+  const theme = useStorage<string>("theme", defaultSettings.theme);
+
+  // 监听主题变化
   watch(
     [theme, themeColor],
-    ([newTheme, newThemeColor], [oldTheme, oldThemeColor]) => {
-      if (newTheme !== oldTheme) {
-        if (newTheme === ThemeEnum.DARK) {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
-      }
-
-      if (newThemeColor !== oldThemeColor) {
-        const rootStyle = document.documentElement.style;
-        rootStyle.setProperty(`--el-color-primary`, newThemeColor);
-        rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor);
-
-        for (let i = 1; i < 10; i++) {
-          rootStyle.setProperty(
-            `--el-color-primary-light-${i}`,
-            `${Color(newThemeColor).alpha(1 - i * 0.1)}`
-          );
-        }
-      }
+    ([newTheme, newThemeColor]) => {
+      toggleDarkMode(newTheme === ThemeEnum.DARK);
+      const colors = generateThemeColors(newThemeColor);
+      applyTheme(colors);
     },
-    {
-      immediate: true, // 立即执行，确保在侦听器创建时执行一次
-    }
+    { immediate: true }
   );
-
+  // 设置更改函数
   const settingsMap: Record<string, Ref<SettingsValue>> = {
     fixedHeader,
     tagsView,
@@ -79,31 +61,17 @@ export const useSettingsStore = defineStore("setting", () => {
     value: SettingsValue;
   }) {
     const setting = settingsMap[key];
-    if (setting) {
-      setting.value = value;
-    }
+    if (setting) setting.value = value;
   }
 
-  /**
-   * 切换主题
-   */
   function changeTheme(val: string) {
     theme.value = val;
   }
 
-  /**
-   * 切换主题颜色
-   *
-   * @param color 主题颜色
-   *
-   */
   function changeThemeColor(color: string) {
     themeColor.value = color;
   }
 
-  /**
-   * 切换布局
-   */
   function changeLayout(val: string) {
     layout.value = val;
   }

src/styles/variables.scss

@@ -1,3 +1,23 @@
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
+  $colors: (
+    "primary": (
+      "base": #4080ff,
+    ),
+    "success": (
+      "base": #23c343,
+    ),
+    "warning": (
+      "base": #ff9a2e,
+    ),
+    "danger": (
+      "base": #f76560,
+    ),
+    "info": (
+      "base": #a9aeb8,
+    ),
+  )
+);
+
 /** 全局SCSS变量 */
 
 :root {

src/views/dashboard/components/VisitTrend.vue

@@ -7,7 +7,7 @@
           访问趋势
           <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
             <i-ep-download
-              class="cursor-pointer hover:color-#409eff ml-1"
+              class="cursor-pointer hover:color-#4080FF ml-1"
               @click="handleDownloadChart"
             />
           </el-tooltip>
@@ -99,10 +99,10 @@ const setChartOptions = (data: VisitTrendVO) => {
         },
         smooth: true,
         itemStyle: {
-          color: "#409EFF",
+          color: "#4080FF",
         },
         lineStyle: {
-          color: "#409EFF",
+          color: "#4080FF",
         },
       },
       {

vite.config.ts

@@ -85,7 +85,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
         resolvers: [
           // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
-          ElementPlusResolver(),
+          ElementPlusResolver({
+            importStyle: "sass",
+          }),
           // 自动导入图标组件
           IconsResolver({}),
         ],
@@ -105,7 +107,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       Components({
         resolvers: [
           // 自动导入 Element Plus 组件
-          ElementPlusResolver(),
+          ElementPlusResolver({
+            importStyle: "sass",
+          }),
           // 自动注册图标组件
           IconsResolver({
             // element-plus图标库，其他图标库 https://icon-sets.iconify.design/