perf: theme (#157)

public/serverConfig.json

@@ -8,6 +8,7 @@
   "Locale": "zh",
   "Layout": "vertical",
   "Theme": "default",
+  "DarkMode": false,
   "Grey": false,
   "Weak": false,
   "HideTabs": false,

src/layout/components/setting/index.vue

@@ -145,23 +145,14 @@ const multiTagsCacheChange = () => {
   useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
 };
 
-//初始化项目配置
-nextTick(() => {
-  settings.greyVal &&
-    document.querySelector("html")?.setAttribute("class", "html-grey");
-  settings.weakVal &&
-    document.querySelector("html")?.setAttribute("class", "html-weakness");
-  settings.tabsVal && tagsChange();
-
-  writeNewStyle(createNewStyle(epThemeColor.value));
-});
-
 // 清空缓存并返回登录页
 function onReset() {
-  storageLocal.clear();
-  storageSession.clear();
-  toggleClass(false, "html-grey", document.querySelector("html"));
-  toggleClass(false, "html-weakness", document.querySelector("html"));
+  toggleClass(getConfig().Grey, "html-grey", document.querySelector("html"));
+  toggleClass(
+    getConfig().Weak,
+    "html-weakness",
+    document.querySelector("html")
+  );
   useMultiTagsStoreHook().handleTags("equal", [
     {
       path: "/welcome",
@@ -176,6 +167,8 @@ function onReset() {
   ]);
   useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache);
   useEpThemeStoreHook().setEpThemeColor("#409EFF");
+  storageLocal.clear();
+  storageSession.clear();
   router.push("/login");
 }
 
@@ -234,7 +227,11 @@ const getThemeColor = computed(() => {
 function setLayoutModel(layout: string) {
   layoutTheme.value.layout = layout;
   window.document.body.setAttribute("layout", layout);
-  instance.layout = { layout, theme: layoutTheme.value.theme };
+  instance.layout = {
+    layout,
+    theme: layoutTheme.value.theme,
+    darkMode: instance.layout.darkMode
+  };
   useAppStoreHook().setLayout(layout);
 }
 
@@ -244,7 +241,11 @@ function setLayoutThemeColor(theme: string) {
   toggleTheme({
     scopeName: `layout-theme-${theme}`
   });
-  instance.layout = { layout: useAppStoreHook().layout, theme };
+  instance.layout = {
+    layout: useAppStoreHook().layout,
+    theme,
+    darkMode: dataTheme.value
+  };
 
   if (theme === "default" || theme === "light") {
     setEpThemeColor("#409EFF");
@@ -261,7 +262,7 @@ const setEpThemeColor = (color: string) => {
   useEpThemeStoreHook().setEpThemeColor(color);
 };
 
-let dataTheme = ref<boolean>(false);
+let dataTheme = ref<boolean>(instance.layout.darkMode);
 
 // 日间、夜间主题切换
 function dataThemeChange() {
@@ -269,8 +270,27 @@ function dataThemeChange() {
   if (dataTheme.value) {
     body.setAttribute("data-theme", "dark");
     setLayoutThemeColor("light");
-  } else body.setAttribute("data-theme", "");
+  } else {
+    body.setAttribute("data-theme", "");
+    instance.layout = {
+      layout: useAppStoreHook().layout,
+      theme: instance.layout.theme,
+      darkMode: dataTheme.value
+    };
+  }
 }
+
+//初始化项目配置
+nextTick(() => {
+  settings.greyVal &&
+    document.querySelector("html")?.setAttribute("class", "html-grey");
+  settings.weakVal &&
+    document.querySelector("html")?.setAttribute("class", "html-weakness");
+  settings.tabsVal && tagsChange();
+
+  writeNewStyle(createNewStyle(epThemeColor.value));
+  dataThemeChange();
+});
 </script>
 
 <template>

src/layout/index.vue

@@ -51,7 +51,8 @@ const layout = computed(() => {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     instance.$storage.layout = {
       layout: instance.$config?.Layout ?? "vertical",
-      theme: instance.$config?.Theme ?? "default"
+      theme: instance.$config?.Theme ?? "default",
+      darkMode: instance.$config?.DarkMode ?? false
     };
   }
   // 灰色模式、色弱模式、隐藏标签页
@@ -98,7 +99,8 @@ function setTheme(layoutModel: string) {
   window.document.body.setAttribute("layout", layoutModel);
   instance.$storage.layout = {
     layout: `${layoutModel}`,
-    theme: instance.$storage.layout?.theme
+    theme: instance.$storage.layout?.theme,
+    darkMode: instance.$storage.layout?.darkMode
   };
 }
 

src/layout/theme/element-plus.ts

@@ -3,6 +3,7 @@ import rgbHex from "rgb-hex";
 import color from "css-color-function";
 import epCss from "element-plus/dist/index.css";
 
+// 色值表
 const formula = {
   "shade-1": "color(primary shade(10%))",
   "light-1": "color(primary tint(10%))",
@@ -16,15 +17,20 @@ const formula = {
   "light-9": "color(primary tint(90%))"
 };
 
+// 把生成的样式表写入到style中
 export const writeNewStyle = (newStyle: string): void => {
   const style = window.document.createElement("style");
   style.innerText = newStyle;
   window.document.head.appendChild(style);
 };
 
+// 根据主题色，生成最新的样式表
 export const createNewStyle = (primaryStyle: string): string => {
+  // 根据主色生成色值表
   const colors = createColors(primaryStyle);
-  let cssText = getOriginStyle();
+  // 在当前ep的默认样式表中标记需要替换的色值
+  let cssText = getStyleTemplate(epCss);
+  // 遍历生成的色值表，在 默认样式表 进行全局替换
   Object.keys(colors).forEach(key => {
     cssText = cssText.replace(
       new RegExp("(:|\\s+)" + key, "g"),
@@ -46,10 +52,6 @@ export const createColors = (primary: string) => {
   return colors;
 };
 
-export const getOriginStyle = () => {
-  return getStyleTemplate(epCss);
-};
-
 const getStyleTemplate = (data: string): string => {
   const colorMap = {
     "#3a8ee6": "shade-1",

src/utils/storage/responsive.ts

@@ -17,7 +17,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
         type: Object,
         default: Storage.getData(undefined, "layout") ?? {
           layout: config.Layout ?? "vertical",
-          theme: config.Theme ?? "default"
+          theme: config.Theme ?? "default",
+          darkMode: config.DarkMode ?? false
         }
       },
       sets: {

types/global.d.ts

@@ -81,6 +81,7 @@ declare global {
     KeepAlive?: boolean;
     Locale?: string;
     Layout?: string;
+    DarkMode?: boolean;
     Theme?: string;
     Grey?: boolean;
     Weak?: boolean;