From e212a0ab75e1c59d0d030ac0b2f07048f6a0f9cf Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期三, 04 十二月 2024 20:32:06 +0800
Subject: [PATCH] 支持开启暗黑模式
---
src/layout/components/Navbar.vue | 28 ++++++++++++++++++++++++++--
1 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index f669a6d..e0e2df8 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -18,6 +18,13 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" />
+ <el-tooltip content="涓婚妯″紡" effect="dark" placement="bottom">
+ <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
+ <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
+ <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
+ </div>
+ </el-tooltip>
+
<el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
@@ -98,6 +105,10 @@
function setLayout() {
emits('setLayout');
}
+
+function toggleTheme() {
+ settingsStore.toggleTheme()
+}
</script>
<style lang='scss' scoped>
@@ -105,7 +116,7 @@
height: 50px;
overflow: hidden;
position: relative;
- background: #fff;
+ background: var(--navbar-bg);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
@@ -150,7 +161,7 @@
padding: 0 8px;
height: 100%;
font-size: 18px;
- color: #5a5e66;
+ color: var(--navbar-text);
vertical-align: text-bottom;
&.hover-effect {
@@ -161,6 +172,19 @@
background: rgba(0, 0, 0, 0.025);
}
}
+
+ &.theme-switch-wrapper {
+ display: flex;
+ align-items: center;
+
+ svg {
+ transition: transform 0.3s;
+
+ &:hover {
+ transform: scale(1.15);
+ }
+ }
+ }
}
.avatar-container {
--
Gitblit v1.9.3