feature: 添加动态主题切换

build/vite/optimizeDeps.ts

@@ -1,16 +1,13 @@
-import { DepOptimizationOptions } from 'vite'
+import { DepOptimizationOptions } from 'vite';
 
 export function createViteOptimizeDeps(): DepOptimizationOptions {
-	const viteOptimizeDeps: DepOptimizationOptions = {
-		// 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。
-		include: [
-			'element-plus/es/locale/lang/zh-tw',
-			'element-plus/es/locale/lang/en',
-		],
-		// 默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。
-		entries: [],
-		// 在预构建中强制排除的依赖项。
-		exclude: ['@zougt/vite-plugin-theme-preprocessor/dist/browser-utils'],
-	}
-	return viteOptimizeDeps
+  const viteOptimizeDeps: DepOptimizationOptions = {
+    // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。
+    include: ['element-plus/es/locale/lang/zh-tw', 'element-plus/es/locale/lang/en'],
+    // 默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。
+    entries: [],
+    // 在预构建中强制排除的依赖项。
+    exclude: ['@zougt/vite-plugin-theme-preprocessor/dist/browser-utils'],
+  };
+  return viteOptimizeDeps;
 }

build/vite/plugin/theme.ts

@@ -3,60 +3,54 @@
  * https://github.com/GitOfZGT/vite-plugin-theme-preprocessor
  */
 
-// import type { Plugin } from 'vite'
+import type { Plugin } from 'vite';
 
-// import path from 'path'
-// import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor'
-
-// // 此配置暂时禁止使用（原因不支持ts）
-
-// export function configThemePlugin(): Plugin | Plugin[] {
-// 	const options = {
-// 		scss: {
-// 			multipleScopeVars: [
-// 				{
-// 					scopeName: 'variables-theme-day',
-// 					path: path.resolve('src/styles/variables-day.scss'),
-// 				},
-// 				{
-// 					scopeName: 'variables-theme-dark',
-// 					path: path.resolve('src/styles/variables-dark.scss'),
-// 				},
-// 			],
-// 			// 默认取 multipleScopeVars[0].scopeName
-// 			defaultScopeName: '',
-// 			// 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
-// 			extract: false,
-// 			// 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
-// 			outputDir: '',
-// 			// 会选取defaultScopeName对应的主题css文件在html添加link
-// 			themeLinkTagId: 'theme-link-tag',
-// 			// "head"||"head-prepend" || "body" ||"body-prepend"
-// 			themeLinkTagInjectTo: 'head',
-// 			// 是否对抽取的css文件内对应scopeName的权重类名移除
-// 			removeCssScopeName: false,
-// 			// 可以自定义css文件名称的函数
-// 			customThemeCssFileName: (scopeName: string) => scopeName,
-// 		},
-// 		// less: {
-// 		//   multipleScopeVars: [
-// 		//     {
-// 		//       scopeName: "theme-default",
-// 		//       path: path.resolve("src/theme/default-vars.less"),
-// 		//     },
-// 		//     {
-// 		//       scopeName: "theme-mauve",
-// 		//       path: path.resolve("src/theme/mauve-vars.less"),
-// 		//     },
-// 		//   ],
-// 		// },
-// 	}
-// 	const plugin: Plugin[] = [themePreprocessorPlugin(options)]
-
-// 	return plugin
-// }
+import path from 'path';
+import { themePreprocessorPlugin } from '@zougt/vite-plugin-theme-preprocessor';
+// 此配置暂时禁止使用（原因不支持ts）
 
 export function configThemePlugin(): Plugin | Plugin[] {
-	const plugin: Plugin[] = []
-	return plugin
+  const options = {
+    scss: {
+      multipleScopeVars: [
+        {
+          scopeName: 'variables-theme-day',
+          path: path.resolve('src/styles/variables-day.scss'),
+        },
+        {
+          scopeName: 'variables-theme-dark',
+          path: path.resolve('src/styles/variables-dark.scss'),
+        },
+      ],
+      // 默认取 multipleScopeVars[0].scopeName
+      defaultScopeName: '',
+      // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+      extract: false,
+      // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
+      outputDir: '',
+      // 会选取defaultScopeName对应的主题css文件在html添加link
+      themeLinkTagId: 'theme-link-tag',
+      // "head"||"head-prepend" || "body" ||"body-prepend"
+      themeLinkTagInjectTo: 'head',
+      // 是否对抽取的css文件内对应scopeName的权重类名移除
+      removeCssScopeName: false,
+      // 可以自定义css文件名称的函数
+      customThemeCssFileName: (scopeName: string) => scopeName,
+    },
+    // less: {
+    //   multipleScopeVars: [
+    //     {
+    //       scopeName: "theme-default",
+    //       path: path.resolve("src/theme/default-vars.less"),
+    //     },
+    //     {
+    //       scopeName: "theme-mauve",
+    //       path: path.resolve("src/theme/mauve-vars.less"),
+    //     },
+    //   ],
+    // },
+  };
+  const plugin: Plugin[] = [themePreprocessorPlugin(options)];
+
+  return plugin;
 }

src/components/Application/AppLocale.vue

@@ -37,6 +37,7 @@
 
 <style lang="scss" scoped>
   .icon {
+    color: #{$textColor};
     font-size: 1em;
   }
 </style>

src/components/Application/AppTheme.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="theme" :class="{ 'theme-dark': isDark }" @click="toggleDarkMode">
+    <div class="theme-inner"></div>
+    <SvgIcon name="sun"></SvgIcon>
+    <SvgIcon name="moon"></SvgIcon>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import SvgIcon from '../SvgIcon/index.vue';
+  import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils';
+
+  // const toggleTheme = (scopeName = 'theme-default') => {
+  // 	document.documentElement.className = scopeName
+  // }
+  const isDark = ref<boolean>(false);
+  const toggleDarkMode = () => {
+    isDark.value = !isDark.value;
+    console.log(isDark.value);
+    let scopeName = 'variables-theme-day';
+    if (isDark.value) scopeName = 'variables-theme-dark';
+    else scopeName = 'variables-theme-day';
+    console.log(scopeName);
+    toggleTheme({
+      scopeName,
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .theme {
+    position: relative;
+    width: 50px;
+    height: 26px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: 151515;
+    border: 1px solid #{$textColor};
+    padding: 0 6px;
+    font-size: 1em;
+    border-radius: 30px;
+    .theme-inner {
+      position: absolute;
+      z-index: 1;
+      width: 18px;
+      height: 18px;
+      background-color: #{$textColor};
+      border-radius: 50%;
+      transition: transform 0.5s, background-color 0.5s;
+      will-change: transform;
+    }
+  }
+  .theme-dark {
+    .theme-inner {
+      transform: translateX(calc(100% + 2px));
+    }
+  }
+  .icon {
+    font-size: 1em;
+  }
+</style>

src/components/Application/index.ts

@@ -1,4 +1,6 @@
 import { withInstall } from '@/utils';
 import appLocale from './AppLocale.vue';
+import appTheme from './AppTheme.vue';
 
 export const AppLocale = withInstall(appLocale);
+export const AppTheme = withInstall(appTheme);

src/layouts/components/AppMain/index.vue

@@ -31,13 +31,13 @@
     // min-height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight});
     overflow: hidden;
     background-color: #{$appMainBgColor};
-
-    .page-container {
-      height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight+40px});
-      margin: 20px;
-      overflow: hidden;
-      border-radius: 10px;
-    }
+  }
+  .page-container {
+    height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight+40px});
+    margin: 20px;
+    overflow: hidden;
+    border-radius: 10px;
+    background-color: #{$mainContentBg};
   }
 
   .fixed-header + .app-main {

src/layouts/components/Navbart/index.vue

@@ -7,6 +7,7 @@
       <Sidebar v-if="sidebarMode === 'horizontal'" class="sidebar-horizontal" mode="horizontal" />
     </div>
     <div class="navbar-right">
+      <AppTheme></AppTheme>
       <AppLocale class="icon"></AppLocale>
       <SvgIcon class="icon" name="iEL-setting" @click="drawer = true"></SvgIcon>
     </div>
@@ -32,7 +33,7 @@
   // import { ref } from 'vue'
   import Sidebar from '../../components/Sidebar/index.vue';
   import Setting from '../../components/Seting/index.vue';
-  import { AppLocale } from '@/components/Application';
+  import { AppLocale, AppTheme } from '@/components/Application';
 
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import { ref } from '@vue/reactivity';

src/styles/index.scss

@@ -1,4 +1,4 @@
-@import './variables-day.scss';
+// @import './variables-day.scss';
 @import './transition.scss';
 @import './sidebar.scss';
 @import './mixin.scss';

src/styles/sidebar.scss

@@ -63,7 +63,7 @@
     }
 
     .el-menu-item.is-active {
-      color: $menuItemActiveText;
+      color: $menuItemActiveText !important;
       background-color: $menuItemActiveBg !important;
       // border-left: #{$menuItemActiveBorderLeft} solid 3px !important;
 

src/styles/variables-dark.scss

@@ -1,31 +1,40 @@
+// 统一颜色主题
+$mianColor: #ffffff; //主色
+$subColor: #212121;
+$subColor1: #151515;
+
+// 主题背景颜色
+$mainBgColor: #212121;
+$mainContentBg: #151515;
+
+// 主题文字颜色
+$textColor: #c9d1d9;
+
 // 左侧导航栏
 $sideBarWidth: 210px;
 $navBarHeight: 54px;
 $BreadcrumbHeight: 50px; //面包屑高度
 
-$menuBg: #212121; // 侧边栏背景颜色
-$menuHover: #212121; // 焦点背景色
-$menuHoverText: #fff; //焦点文字颜色
-$menuBorderLeft: #fff; //左描边背景颜色
-$menuText: #909399; //文字颜色
-$menuActiveText: #fff; //选中的文字颜色
+$menuBg: $mainBgColor; // 侧边栏背景颜色
+$menuHover: #2d2d2d; // 焦点背景色
+$menuHoverText: $mianColor; //焦点文字颜色
+$menuText: $textColor; //文字颜色
+$menuActiveText: $mianColor; //选中的文字颜色
 
-$menuItemBg: #212121; //二级背景颜色
-$menuItemBorderLeft: #212121; //未选中的背景颜色
-$menuItemText: #909399; //二级文字颜色
-$menuItemHover: #212121; //二级焦点背景颜色
-$menuItemHoverText: #fff;
-$menuItemActiveText: #fff;
+$menuItemBg: $mainBgColor; //二级背景颜色
+$menuItemBorderLeft: $mainBgColor; //未选中的背景颜色
+$menuItemText: $textColor; //二级文字颜色
+$menuItemHover: #2d2d2d; //二级焦点背景颜色
+$menuItemHoverText: $mianColor; //二级焦点文字颜色
+$menuItemActiveText: $mianColor;
 $menuItemActiveBg: #2d2d2d; //二级选中背景颜色
-$menuItemActiveBorderLeft: #409eff; //二级左描边背景颜色
+$menuItemActiveBorderLeft: $mianColor; //二级左描边背景颜色
 
-$appMainBgColor: #f5f6fa; //app-mian背景颜色
-$navBarColor: #151515; //顶部导航栏背景颜色
+$appMainBgColor: #000; //app-mian背景颜色
+$navBarColor: $mainBgColor; //顶部导航栏背景颜色
 $navBarBorderBottomColor: #4a4a4a;
-$BreadcrumbColor: #151515; //面包屑背景颜色
-$BreadcrumbText: #fff;
-
-$textColor: #606266;
+$BreadcrumbColor: $mainBgColor; //面包屑背景颜色
+$BreadcrumbText: $textColor;
 
 :export {
   menutext: $menuText;