refactor: theme

src/layout/theme/default-vars.scss

@@ -0,0 +1,17 @@
+/**
+*此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升
+*同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default
+*/
+
+// 菜单选中后字体样式
+$subMenuActiveText: #f4f4f5 !default;
+//菜单背景
+$menuBg: #1b2a47 !default;
+// 鼠标覆盖菜单时的背景
+$menuHover: #2a395b !default;
+// 子菜单背景
+$subMenuBg: #1f2d3d !default;
+// 鼠标覆盖子菜单时的背景
+$subMenuHover: #001528 !default;
+$navTextColor: #fff !default;
+$menuText: #7a80b4;

src/layout/theme/index.ts

@@ -0,0 +1,19 @@
+export const toggleTheme = (scopeName = "theme-default") => {
+  let styleLink: any = document.getElementById("theme-button");
+  if (styleLink) {
+    // 假如存在id为theme-button 的link标签，直接修改其href
+    styleLink.href = `/${scopeName}.css`;
+    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
+    document.documentElement.className = scopeName;
+  } else {
+    // 不存在的话，则新建一个
+    styleLink = document.createElement("link");
+    styleLink.type = "text/css";
+    styleLink.rel = "stylesheet";
+    styleLink.id = "theme-button";
+    styleLink.href = `/${scopeName}.css`;
+    // 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作
+    document.documentElement.className = scopeName;
+    document.head.append(styleLink);
+  }
+};

src/layout/theme/light-vars.scss

@@ -0,0 +1,7 @@
+$subMenuActiveText: #409eff;
+$menuBg: #fff;
+$menuHover: #e0ebf6;
+$subMenuBg: #fff;
+$subMenuHover: #e0ebf6;
+$navTextColor: #7a80b4;
+$menuText: #7a80b4;