From 94f96181f3ccd439b4d4cad681d2c4d1739e6117 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail>
Date: 星期六, 22 四月 2023 01:05:11 +0800
Subject: [PATCH] add DarkMode
---
src/layout/components/Settings/index.vue | 23 ++++++++++++++++++-----
1 files changed, 18 insertions(+), 5 deletions(-)
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index bf62b14..8eb7921 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,8 +1,7 @@
<template>
<el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
- <div class="setting-drawer-title">
- <h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3>
- </div>
+ <h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3>
+
<div class="setting-drawer-block-checbox">
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
<img src="@/assets/images/dark.svg" alt="dark" />
@@ -35,6 +34,13 @@
<el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
</span>
</div>
+ <div class="drawer-item">
+ <span>娣辫壊妯″紡</span>
+ <span class="comp-style">
+ <el-switch v-model="isDark" @change="toggleDark" class="drawer-switch" />
+ </span>
+ </div>
+
<el-divider />
<h3 class="drawer-title">绯荤粺甯冨眬閰嶇疆</h3>
@@ -102,7 +108,15 @@
const storeSettings = computed(() => settingsStore);
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
-/** 鏄惁闇�瑕乼opnav */
+// 鏄惁鏆楅粦妯″紡
+const isDark = useDark({
+ storageKey: 'useDarkKey',
+ valueDark: 'dark',
+ valueLight: 'light',
+});
+const toggleDark = () => useToggle(isDark);
+
+/** 鏄惁闇�瑕乼opNav */
const topNav = computed({
get: () => storeSettings.value.topNav,
set: (val) => {
@@ -234,7 +248,6 @@
}
.drawer-item {
- color: rgba(0, 0, 0, 0.65);
padding: 12px 0;
font-size: 14px;
--
Gitblit v1.9.3