refactor: 升级vite至v6版本，升级sass至最新版，重构主题写法，删除@pureadmin/theme

.nvmrc

@@ -1 +1 @@
-v20.17.0
+v20.18.0

build/optimize.ts

@@ -54,10 +54,6 @@ const include = [
  * 在预构建中强制排除的依赖项
  * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
  */
-const exclude = [
+const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"];
-  "@iconify-icons/ep",
-  "@iconify-icons/ri",
-  "@pureadmin/theme/dist/browser-utils"
-];
 
 export { include, exclude };

build/plugins.ts

@@ -11,9 +11,7 @@ import { configCompressPlugin } from "./compress";
 import removeNoMatch from "vite-plugin-router-warn";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
-import { themePreprocessorPlugin } from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-import { genScssMultipleScopeVars } from "../src/layout/theme";
 import { vitePluginFakeServer } from "vite-plugin-fake-server";
 
 export function getPluginsList(
@@ -54,13 +52,6 @@ export function getPluginsList(
       infixName: false,
       enableProd: true
     }),
-    // 自定义主题
-    themePreprocessorPlugin({
-      scss: {
-        multipleScopeVars: genScssMultipleScopeVars(),
-        extract: true
-      }
-    }),
     // svg组件化支持
     svgLoader(),
     VITE_CDN ? cdn : null,

package.json

@@ -69,7 +69,7 @@
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "el-table-infinite-scroll": "^3.0.6",
-    "element-plus": "^2.8.5",
+    "element-plus": "https://pkg.pr.new/element-plus/element-plus@18711",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",
@@ -113,12 +113,11 @@
     "@commitlint/config-conventional": "^19.5.0",
     "@commitlint/types": "^19.5.0",
     "@eslint/js": "^9.12.0",
-    "@faker-js/faker": "^8.4.1",
+    "@faker-js/faker": "^9.1.0",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.2",
     "@intlify/unplugin-vue-i18n": "^5.2.0",
-    "@pureadmin/theme": "^3.3.0",
     "@types/dagre": "^0.7.52",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
@@ -150,7 +149,7 @@
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "1.79.6",
+    "sass": "^1.80.5",
     "stylelint": "^16.10.0",
     "stylelint-config-recess-order": "^5.1.1",
     "stylelint-config-recommended-vue": "^1.5.0",
@@ -159,7 +158,7 @@
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.3",
-    "vite": "^5.4.8",
+    "vite": "6.0.0-beta.7",
     "vite-plugin-cdn-import": "^1.0.1",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-compression": "^0.5.1",

src/layout/components/lay-setting/index.vue

@@ -14,7 +14,6 @@ import { emitter } from "@/utils/mitt";
 import LayPanel from "../lay-panel/index.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
-import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
@@ -50,9 +49,7 @@ const {
 if (unref(layoutTheme)) {
   const layout = unref(layoutTheme).layout;
   const theme = unref(layoutTheme).theme;
-  toggleTheme({
+  document.documentElement.setAttribute("data-theme", theme);
-    scopeName: `layout-theme-${theme}`
-  });
   setLayoutModel(layout);
 }
 

src/layout/components/lay-sidebar/components/SidebarLogo.vue

@@ -63,7 +63,7 @@ const { title, getLogo } = useNav();
       font-size: 18px;
       font-weight: 600;
       line-height: 32px;
-      color: $subMenuActiveText;
+      color: var(--pure-theme-sub-menu-active-text);
       text-overflow: ellipsis;
       white-space: nowrap;
     }

src/layout/hooks/useDataThemeChange.ts

@@ -6,14 +6,9 @@ import { routerArrays } from "@/layout/types";
 import { router, resetRouter } from "@/router";
 import type { themeColorsType } from "../types";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useGlobal, storageLocal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import {
+import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";
-  darken,
-  lighten,
-  toggleTheme
-} from "@pureadmin/theme/dist/browser-utils";
 
 export function useDataThemeChange() {
   const { layoutTheme, layout } = useLayout();
@@ -54,9 +49,7 @@ export function useDataThemeChange() {
     isClick = true
   ) {
     layoutTheme.value.theme = theme;
-    toggleTheme({
+    document.documentElement.setAttribute("data-theme", theme);
-      scopeName: `layout-theme-${theme}`
-    });
     // 如果非isClick，保留之前的themeColor
     const storageThemeColor = $storage.layout.themeColor;
     $storage.layout = {

src/layout/theme/index.ts

@@ -1,129 +0,0 @@
-/**
- * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
- */
-
-import type { multipleScopeVarsOptions } from "@pureadmin/theme";
-
-/** 预设主题色 */
-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"
-  },
-  /* 道奇蓝 */
-  default: {
-    subMenuActiveText: "#fff",
-    menuBg: "#001529",
-    menuHover: "rgb(64 145 247 / 15%)",
-    subMenuBg: "#0f0303",
-    subMenuActiveBg: "#4091f7",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#002140",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#4091f7"
-  },
-  /* 深紫罗兰色 */
-  saucePurple: {
-    subMenuActiveText: "#fff",
-    menuBg: "#130824",
-    menuHover: "rgb(105 58 201 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#693ac9",
-    menuText: "#7a80b4",
-    sidebarLogo: "#1f0c38",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#693ac9"
-  },
-  /* 深粉色 */
-  pink: {
-    subMenuActiveText: "#fff",
-    menuBg: "#28081a",
-    menuHover: "rgb(216 68 147 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#d84493",
-    menuText: "#7a80b4",
-    sidebarLogo: "#3f0d29",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#d84493"
-  },
-  /* 猩红色 */
-  dusk: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2a0608",
-    menuHover: "rgb(225 60 57 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#e13c39",
-    menuText: "rgb(254 254 254 / 65.1%)",
-    sidebarLogo: "#42090c",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e13c39"
-  },
-  /* 橙红色 */
-  volcano: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2b0e05",
-    menuHover: "rgb(232 95 51 / 15%)",
-    subMenuBg: "#0f0603",
-    subMenuActiveBg: "#e85f33",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#441708",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e85f33"
-  },
-  /* 绿宝石 */
-  mingQing: {
-    subMenuActiveText: "#fff",
-    menuBg: "#032121",
-    menuHover: "rgb(89 191 193 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#59bfc1",
-    menuText: "#7a80b4",
-    sidebarLogo: "#053434",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#59bfc1"
-  },
-  /* 酸橙绿 */
-  auroraGreen: {
-    subMenuActiveText: "#fff",
-    menuBg: "#0b1e15",
-    menuHover: "rgb(96 172 128 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#60ac80",
-    menuText: "#7a80b4",
-    sidebarLogo: "#112f21",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#60ac80"
-  }
-};
-
-/**
- * @description 将预设主题色处理成主题插件所需格式
- */
-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;
-      `
-    } as multipleScopeVarsOptions);
-  });
-  return result;
-};

src/style/index.scss

@@ -1,7 +1,8 @@
-@import "./transition";
+@use "theme";
-@import "./element-plus";
+@use "transition";
-@import "./sidebar";
+@use "element-plus";
-@import "./dark";
+@use "sidebar";
+@use "dark";
 
 /* 自定义全局 CssVar */
 :root {
@@ -13,6 +14,16 @@
 
   /* switch关闭状态下的color 需要时可取用 */
   --pure-switch-off-color: #a6a6a6;
+
+  /** 主题色 */
+  --pure-theme-sub-menu-active-text: initial;
+  --pure-theme-menu-bg: none;
+  --pure-theme-menu-hover: none;
+  --pure-theme-sub-menu-bg: transparent;
+  --pure-theme-menu-text: initial;
+  --pure-theme-sidebar-logo: none;
+  --pure-theme-menu-title-hover: initial;
+  --pure-theme-menu-active-before: transparent;
 }
 
 /* 灰色模式 */

src/style/sidebar.scss

@@ -94,7 +94,7 @@
     height: 100%;
     overflow: visible;
     font-size: 0;
-    background: $menuBg;
+    background: var(--pure-theme-menu-bg);
     border-right: 1px solid var(--pure-border-color);
 
     /* 展开动画 */
@@ -150,11 +150,11 @@
     .el-menu-item,
     .el-sub-menu__title {
       height: 50px;
-      color: $menuText;
+      color: var(--pure-theme-menu-text);
       background-color: transparent !important;
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
 
       div,
@@ -173,15 +173,15 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
     .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
 
@@ -204,7 +204,7 @@
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
     }
 
     /* 有子集的激活菜单左侧小竖条 */
@@ -218,7 +218,7 @@
       height: 100%;
       clear: both;
       content: "";
-      background-color: $menuActiveBefore;
+      background-color: var(--pure-theme-menu-active-before);
       transition: all var(--pure-transition-duration) ease-in-out;
       transform: translateY(0);
     }
@@ -253,7 +253,7 @@
   /* vertical 菜单折叠 */
   .el-menu--vertical {
     .el-menu--popup {
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
 
       .el-menu-item {
         span {
@@ -271,10 +271,10 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
@@ -282,23 +282,23 @@
     .el-menu .el-sub-menu__title {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
     }
 
     .el-menu-item,
     .el-sub-menu__title {
       height: 50px;
       line-height: 50px;
-      color: $menuText;
+      color: var(--pure-theme-menu-text);
-      background-color: $subMenuBg;
+      background-color: var(--pure-theme-sub-menu-bg);
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
     .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
 
@@ -342,15 +342,15 @@
     }
 
     .el-menu--popup {
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
 
       a > .is-active.submenu-title-noDropdown {
         border-bottom: none;
       }
 
       .el-menu-item {
-        color: $menuText;
+        color: var(--pure-theme-menu-text);
-        background-color: $subMenuBg;
+        background-color: var(--pure-theme-sub-menu-bg);
 
         span {
           font-size: 14px;
@@ -358,7 +358,7 @@
       }
 
       .el-sub-menu__title {
-        color: $menuText;
+        color: var(--pure-theme-menu-text);
       }
     }
 
@@ -366,31 +366,31 @@
     .el-menu .el-sub-menu__title {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
     .nest-menu .el-sub-menu > .el-sub-menu__title,
     .el-menu-item {
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
     .el-menu-item.is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
 
@@ -415,7 +415,7 @@
     justify-content: space-around;
     width: 100%;
     height: 48px;
-    background: $menuBg;
+    background: var(--pure-theme-menu-bg);
 
     .horizontal-header-left {
       display: flex;
@@ -440,7 +440,7 @@
         font-size: 18px;
         font-weight: 600;
         line-height: 32px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
         text-overflow: ellipsis;
         white-space: nowrap;
       }
@@ -458,7 +458,7 @@
       align-items: center;
       justify-content: flex-end;
       min-width: 340px;
-      color: $subMenuActiveText;
+      color: var(--pure-theme-sub-menu-active-text);
 
       /* 搜索 */
       .search-container,
@@ -473,20 +473,20 @@
       /* 设置 */
       .set-icon {
         &:hover {
-          background: $menuHover;
+          background: var(--pure-theme-menu-hover);
         }
       }
 
       .dropdown-badge {
         height: 48px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
       }
 
       .globalization {
         width: 40px;
         height: 48px;
         padding: 11px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
         cursor: pointer;
         outline: none;
       }
@@ -497,7 +497,7 @@
         justify-content: space-around;
         height: 48px;
         padding: 10px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
         cursor: pointer;
 
         p {
@@ -522,10 +522,10 @@
     .el-menu-item,
     .el-sub-menu__title {
       padding-right: var(--el-menu-base-level-padding);
-      color: $menuText;
+      color: var(--pure-theme-menu-text);
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
@@ -533,7 +533,7 @@
     .el-sub-menu__title {
       height: 48px;
       line-height: 48px;
-      background: $menuBg;
+      background: var(--pure-theme-menu-bg);
 
       svg {
         position: static !important;
@@ -542,15 +542,15 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
     .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
   }
@@ -596,7 +596,7 @@ body[layout="vertical"] {
   }
 
   .sidebar-logo-container {
-    background: $sidebarLogo;
+    background: var(--pure-theme-sidebar-logo);
   }
 
   .hideSidebar {

src/style/theme.scss

@@ -0,0 +1,95 @@
+/* 亮白色 */
+html[data-theme="light"] {
+  --pure-theme-sub-menu-active-text: #000000d9;
+  --pure-theme-menu-bg: #fff;
+  --pure-theme-menu-hover: #f6f6f6;
+  --pure-theme-sub-menu-bg: #fff;
+  --pure-theme-menu-text: rgb(0 0 0 / 60%);
+  --pure-theme-sidebar-logo: #fff;
+  --pure-theme-menu-title-hover: #000;
+  --pure-theme-menu-active-before: #4091f7;
+}
+
+/* 道奇蓝 */
+html[data-theme="default"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #001529;
+  --pure-theme-menu-hover: rgb(64 145 247 / 15%);
+  --pure-theme-sub-menu-bg: #0f0303;
+  --pure-theme-menu-text: rgb(254 254 254 / 65%);
+  --pure-theme-sidebar-logo: #002140;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #4091f7;
+}
+
+/* 深紫罗兰色 */
+html[data-theme="saucePurple"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #130824;
+  --pure-theme-menu-hover: rgb(105 58 201 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #1f0c38;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #693ac9;
+}
+
+/* 深粉色 */
+html[data-theme="pink"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #28081a;
+  --pure-theme-menu-hover: rgb(216 68 147 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #3f0d29;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #d84493;
+}
+
+/* 猩红色 */
+html[data-theme="dusk"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #2a0608;
+  --pure-theme-menu-hover: rgb(225 60 57 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: rgb(254 254 254 / 65.1%);
+  --pure-theme-sidebar-logo: #42090c;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #e13c39;
+}
+
+/* 橙红色 */
+html[data-theme="volcano"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #2b0e05;
+  --pure-theme-menu-hover: rgb(232 95 51 / 15%);
+  --pure-theme-sub-menu-bg: #0f0603;
+  --pure-theme-menu-text: rgb(254 254 254 / 65%);
+  --pure-theme-sidebar-logo: #441708;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #e85f33;
+}
+
+/* 绿宝石 */
+html[data-theme="mingQing"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #032121;
+  --pure-theme-menu-hover: rgb(89 191 193 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #053434;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #59bfc1;
+}
+
+/* 酸橙绿 */
+html[data-theme="auroraGreen"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #0b1e15;
+  --pure-theme-menu-hover: rgb(96 172 128 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #112f21;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #60ac80;
+}

src/views/account-settings/index.vue

@@ -131,7 +131,7 @@ getMine().then(res => {
 
 <style lang="scss">
 .pure-account-settings {
-  background: $menuBg;
+  background: var(--pure-theme-menu-bg);
 }
 
 .pure-account-settings-menu {
@@ -140,12 +140,12 @@ getMine().then(res => {
 
   .el-menu-item {
     height: 48px !important;
-    color: $menuText;
+    color: var(--pure-theme-menu-text);
     background-color: transparent !important;
     transition: color 0.2s;
 
     &:hover {
-      color: $menuTitleHover !important;
+      color: var(--pure-theme-menu-title-hover) !important;
     }
 
     &.is-active {