😊update theme

src/components/common/app-loading.vue

@@ -48,7 +48,13 @@ import { hexToRgba } from "@/utils"
 
 const SYSTEM_NAME = "WindAdmin"
 const setting = JSON.parse(localStorage.getItem("setting") || "{}")
-const themeColor = setting.themeColor || "#1890ff"
+const themeColor = setting.themeColor || "#5ac8fa"
+const setThemeByCache = () => {
+	document.documentElement.style.setProperty("--theme-color", themeColor)
+	document.documentElement.style.setProperty("--menu-color-hover", hexToRgba(themeColor, 0.3))
+	document.documentElement.style.setProperty("--tabbar-color-hover", hexToRgba(themeColor, 0.2))
+}
+setThemeByCache()
 </script>
 
 <style lang="scss" scoped>
@@ -65,7 +71,7 @@ const themeColor = setting.themeColor || "#1890ff"
 	stop-color: v-bind(hexToRgba(themeColor, 0.5));
 }
 .system_name {
-  color: v-bind(hexToRgba(themeColor, 0.8));
+	color: v-bind(hexToRgba(themeColor, 0.8));
 }
 .halvan {
 	animation: Snurra1 10s infinite linear;

src/components/svg-icon/index.vue

@@ -20,7 +20,7 @@ export default defineComponent({
 		},
 		color: {
 			type: String,
-			default: "#333",
+			default: "var(--text-color)",
 		},
 	},
 	computed: {

src/layouts/breadcrumb/Breadcrumb.vue

@@ -1,38 +1,34 @@
 <script lang="ts" setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-
-import { useVisitedViewStore } from '@/store';
-
-
-const visitedViewStore = useVisitedViewStore();
-
-
+import { ArrowRight } from "@element-plus/icons-vue"
+import { useVisitedViewStore } from "@/store"
 
+const visitedViewStore = useVisitedViewStore()
 </script>
 
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb :separator-icon="ArrowRight">
-      <TransitionGroup name="list">
-        <el-breadcrumb-item v-for="item in visitedViewStore.breadcrumbList" :key="item.path">{{ item.meta ? item.meta.title : item.title
-        }}</el-breadcrumb-item>
-      </TransitionGroup>
-    </el-breadcrumb>
-  </div>
+	<div class="breadcrumb">
+		<el-breadcrumb :separator-icon="ArrowRight">
+			<TransitionGroup name="list">
+				<el-breadcrumb-item v-for="item in visitedViewStore.breadcrumbList" :key="item.path">
+					{{ item.meta ? item.meta.title : item.title }}
+				</el-breadcrumb-item>
+			</TransitionGroup>
+		</el-breadcrumb>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .list-enter-active,
 .list-leave-active {
-  transition: all 0.5s ease;
+	transition: all 0.5s ease;
 }
 
 .list-enter-from,
 .list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
+	opacity: 0;
+	transform: translateX(30px);
 }
 .list-leave-active {
-  position: absolute;
+	position: absolute;
 }
-</style>
+</style>

src/layouts/logo/Logo.vue

@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { useVisitedViewStore,useSettingStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
+import { useSettingStore } from "@/store"
 const settingStore = useSettingStore()
 </script>
 
 <template>
 	<div class="Logo">
 		<div class="logo-img">
-			<SvgIcon :name="'logo'" :color="settingStore.themeColor" class="text-26" />
+			<SvgIcon :name="'logo'" :color="'var(--theme-color)'" class="text-26" />
 		</div>
 		<div class="title transition duration-300 ease-in-out" v-if="!settingStore.isCollapse">
-			<h2 :style="{ color: settingStore.themeColor }" class="text">Admin 管理系统</h2>
+			<h2 class="text">Admin 管理系统</h2>
 		</div>
 	</div>
 </template>
@@ -32,7 +31,8 @@ const settingStore = useSettingStore()
 	.title {
 		padding: 0 10px;
 		.text {
-			@apply text-16px font-bold text-primary transition duration-300 ease-in-out;
+			color: var(--theme-color);
+			@apply text-16px font-bold transition duration-300 ease-in-out;
 		}
 	}
 }

src/layouts/setting/SystemSet.vue

@@ -3,6 +3,15 @@ import { ref, watchEffect, watch, computed } from "vue"
 import { useSettingStore } from "@/store"
 import themeColorConfig from "@/assets/themes/themeColor.json"
 import OtherColor from "@/assets/themes/color.json"
+import { useDark, useToggle } from "@vueuse/core"
+
+const isDark = useDark({
+	selector: "html",
+	attribute: "color-scheme",
+	valueDark: "dark",
+	valueLight: "light",
+})
+const toggleDark = useToggle(isDark)
 
 const colorDialogV = ref(false)
 const activeTab = ref("红色系")
@@ -53,7 +62,7 @@ const animateModeList = [
 						inactive-value="light"
 						active-action-icon="Moon"
 						inactive-action-icon="Sunny"
-						@change="settingStore.setThemeBg"
+						@change="toggleDark()"
 						style="--el-switch-on-color: #18181c; --el-switch-off-color: #dadada"></el-switch>
 				</el-col>
 			</el-row>
@@ -63,7 +72,7 @@ const animateModeList = [
 				</el-col>
 				<el-col style="display: flex; justify-content: center; height: 80px">
 					<el-radio-group v-model="settingStore.layoutTheme" @change="settingStore.setThemeType">
-						<el-radio label="classic" class="radio" style="height: 100%">
+						<el-radio value="classic" class="radio" style="height: 100%">
 							<el-row style="height: 40px; width: 50px">
 								<el-col
 									:span="6"
@@ -74,7 +83,7 @@ const animateModeList = [
 							</el-row>
 							<el-row justify="center">左右</el-row>
 						</el-radio>
-						<el-radio label="topb" class="radio">
+						<el-radio value="topb" class="radio">
 							<el-row style="height: 40px; width: 50px">
 								<el-col
 									:span="24"

src/layouts/sidebar/MenuItem.vue

@@ -2,7 +2,6 @@
 import router from "@/router"
 import { ref, onMounted, computed } from "vue"
 import { useSettingStore, useVisitedViewStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
 import { isExternal } from "@/utils"
 
 const settingStore = useSettingStore()
@@ -23,8 +22,8 @@ const activeMenuBg = computed(() => {
 
 const setThemeColor = computed(() => {
 	return router.currentRoute.value.path === props.item.path
-		? settingStore.themeColor
-		: defaultThemeColor[settingStore.themeBg].menuTextColor
+		? 'var(--theme-color)'
+		: 'var(--text-color)'
 })
 
 const visitedViewStore = useVisitedViewStore()
@@ -78,7 +77,7 @@ const handleClick = item => {
 	z-index: 1;
 	margin: 3px 8px;
 	border-radius: 5px;
-	background-color: v-bind(activeMenuBg);
+	background-color: var(--menu-color-hover);
 }
 .is-active::before {
 	@extend #before;

src/layouts/sidebar/MenuScroll.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import defaultThemeColor from "@/assets/themes/index"
-
 import { ref, computed, onMounted } from "vue"
 
 import { useRouter } from "vue-router"
@@ -31,7 +29,6 @@ const activeMenu = computed(() => {
 	return router.currentRoute.value.path
 })
 
-console.log(defaultThemeColor)
 onMounted(() => {})
 </script>
 
@@ -46,9 +43,7 @@ onMounted(() => {})
 			:mode="mode"
 			:collapse-transition="false"
 			:ellipsis="false"
-			popper-effect="dark"
-			:background-color="defaultThemeColor[settingStore.themeBg].menuColor"
-			:text-color="defaultThemeColor[settingStore.themeBg].menuTextColor">
+			popper-effect="dark">
 			<slot></slot>
 		</el-menu>
 	</el-scrollbar>
@@ -71,9 +66,7 @@ onMounted(() => {})
 	width: 100%;
 	height: 100%;
 	border: none;
-	background: transparent;
 	transition: all 0.3s;
-
 	.el-sub-menu {
 		background: inherit !important;
 	}

src/layouts/sidebar/MenuSub.vue

@@ -1,12 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue"
-import { useSettingStore, useVisitedViewStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
-import { useRouter } from "vue-router"
-
-const router = useRouter()
-
-const settingStore = useSettingStore()
+import { useVisitedViewStore } from "@/store"
 const visitedViewStore = useVisitedViewStore()
 
 const props = defineProps({
@@ -16,14 +10,10 @@ const props = defineProps({
 	},
 })
 
-const activeMenuBg = computed(() => {
-	return settingStore.getMenuActiveBg()
-})
-
 const setThemeColor = computed(() => {
 	return visitedViewStore.breadcrumbList.some(item => item.path === props.item.path)
-		? settingStore.themeColor
-		: defaultThemeColor[settingStore.themeBg].menuTextColor
+		? "var(--theme-color)"
+		: "var(--text-color)"
 })
 </script>
 
@@ -57,7 +47,7 @@ const setThemeColor = computed(() => {
 	z-index: 1;
 	margin: 4px 8px;
 	border-radius: 5px;
-	background-color: v-bind(activeMenuBg) !important;
+	background-color: var(--menu-color-hover);
 }
 
 :deep(.el-sub-menu__title) {

src/layouts/tabbar/TabBar.vue

@@ -13,14 +13,6 @@ useTabBarEvent()
 
 const activeTableTabsValue = ref("/index/home")
 
-const activeMenuBg = computed(() => {
-	return settingStore.getMenuActiveBg(0.1)
-})
-
-const activeColor = computed(() => {
-	return settingStore.themeColor
-})
-
 watch(
 	router.currentRoute,
 	newValue => {
@@ -164,14 +156,14 @@ const closeTab = (type, event) => {
 						height: 30px;
 						font-size: 12px;
 						border-radius: 5px;
-						background-color: v-bind(activeMenuBg);
+						background-color: var(--tabbar-color-hover);
 						border: none;
 						&:hover {
-							color: v-bind(activeColor);
+							color: var(--theme-color);
 						}
 					}
 					.is-active {
-						color: v-bind(activeColor);
+						color: var(--theme-color);
 					}
 				}
 			}

src/layouts/themes/ClassicTheme.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import defaultThemeColor from "@/assets/themes/index"
 import { useSettingStore } from "@/store"
 const settingStore = useSettingStore()
 
@@ -11,14 +10,14 @@ import TabBar from "@/layouts/tabbar/TabBar.vue"
 import Collapse from "@/layouts/toolbar/Collapse.vue"
 import Logo from "@/layouts/logo/Logo.vue"
 import Breadcrumb from "@/layouts/breadcrumb/Breadcrumb.vue"
+
 </script>
 
 <template>
 	<div id="container_sub">
 		<aside
 			class="aside"
-			:class="[settingStore.isCollapse ? 'close-status' : 'open-status']"
-			:style="{ backgroundColor: defaultThemeColor[settingStore.themeBg].menuColor }">
+			:class="[settingStore.isCollapse ? 'close-status' : 'open-status']">
 			<div class="aside_head">
 				<Logo />
 			</div>
@@ -71,7 +70,8 @@ import Breadcrumb from "@/layouts/breadcrumb/Breadcrumb.vue"
 
 aside {
 	height: 100%;
-	border-right: 0.5px solid #ebeef5;
+	background-color: var(--bg-color);
+	border-right: 0.5px solid var(--border-color-lightest);
 	overflow: hidden;
 
 	.aside_head {
@@ -92,6 +92,7 @@ main {
 		display: flex;
 		height: $head-height;
 		border-bottom: 0.5px solid #ebeef5;
+		background-color: var(--bg-color);
 
 		.left {
 			min-width: 210px;

src/layouts/themes/TopBLayout.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { watch } from "vue"
 import { useSettingStore } from "@/store"
-
-import defaultThemeColor from "@/assets/themes/index"
 const settingStore = useSettingStore()
 
 import ToolBar from "@/layouts/toolbar/ToolBar.vue"
@@ -26,9 +24,7 @@ watch(
 
 <template>
 	<div id="container_sub">
-		<div
-			class="main_head"
-			:style="{ backgroundColor: defaultThemeColor[settingStore.themeBg].menuColor }">
+		<div class="main_head">
 			<div class="left">
 				<Logo />
 			</div>
@@ -61,6 +57,7 @@ watch(
 		display: flex;
 		height: $head-height;
 		border-bottom: 0.5px solid #ebeef5;
+		background-color: var(--bg-color);
 
 		.left {
 		}

src/layouts/toolbar/Collapse.vue

@@ -27,8 +27,8 @@ const activeMenuBg = computed(() => {
 		vertical-align: middle;
 		&:hover {
 			cursor: pointer;
-			fill: v-bind(activeMenuBg) !important;
-			stroke: v-bind(activeMenuBg) !important;
+			fill: var(--theme-color) !important;
+			stroke: var(--theme-color) !important;
 		}
 	}
 }