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/assets/styles/ruoyi.scss | 4 +-
src/assets/styles/index.scss | 6 ++
src/assets/styles/sidebar.scss | 4 +-
src/layout/components/Navbar.vue | 2
src/layout/components/TagsView/index.vue | 14 ++++---
src/layout/components/Settings/index.vue | 23 +++++++++--
src/assets/styles/variables.module.scss | 65 ++++++++++++++++++++++----------
src/components/Pagination/index.vue | 1
8 files changed, 81 insertions(+), 38 deletions(-)
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index ce44881..e31ea97 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -26,6 +26,10 @@
box-sizing: border-box;
}
+html.dark .svg-icon, html.dark svg {
+ fill: var(--el-text-color-regular);
+}
+
#app {
height: 100%;
}
@@ -200,4 +204,4 @@
vertical-align: middle;
margin-bottom: 10px;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index 2e00d00..d2ecb24 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -90,8 +90,8 @@
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
- background-color: #f8f8f9 !important;
- color: #515a6e;
+ background-color: $table-header-bg !important;
+ color: $table-header-text-color;
height: 40px !important;
font-size: 13px;
}
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 4c2f3f1..2d11eaf 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -84,7 +84,7 @@
.sub-menu-title-noDropdown,
.el-sub-menu__title {
&:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
+ background-color: $base-sub-menu-title-hover !important;
}
}
@@ -211,7 +211,7 @@
.el-menu-item {
&:hover {
// you can use $sub-menuHover
- background-color: rgba(0, 0, 0, 0.06) !important;
+ background-color: $base-menu-hover !important;
}
}
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 639b23b..fdcb11c 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,3 +1,38 @@
+// 鍏ㄥ眬SCSS鍙橀噺
+:root {
+ --menuBg: #304156;
+ --menuColor: #bfcbd9;
+ --menuActiveText: #f4f4f5;
+ --menuHover: #263445;
+
+ --subMenuBg: #1f2d3d;
+ --subMenuActiveText: #f4f4f5;
+ --subMenuHover: #001528;
+ --subMenuTitleHover: #293444;
+
+ --tableHeaderBg: #f8f8f9;
+ --tableHeaderTextColor: #515a6e;
+}
+html.dark {
+ --menuBg: #1d1e1f;
+ --menuColor: #bfcbd9;
+ --menuActiveText: #f4f4f5;
+ --menuHover: #171819;
+
+ --subMenuBg: #1d1e1f;
+ --subMenuActiveText: #1d1e1f;
+ --subMenuHover: #171819;
+ --subMenuTitleHover: #171819;
+
+ --tableHeaderBg: var(--el-bg-color);
+ --tableHeaderTextColor: var(--el-text-color);
+
+ // 瑕嗙洊ele 楂樹寒褰撳墠琛岀殑鏍囧噯鏆楄壊
+ .el-tree-node__content {
+ --el-color-primary-light-9: #262727;
+ }
+}
+
// base color
$blue: #324157;
$light-blue: #3a71a8;
@@ -9,32 +44,22 @@
$panGreen: #30b08f;
// 榛樿鑿滃崟涓婚椋庢牸
-$base-menu-color: #bfcbd9;
-$base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
+$base-menu-color: var(--menuColor);
+$base-menu-hover: var(--menuHover);
+$base-menu-color-active: var(--menuActiveText);
+$base-menu-background: var(--menuBg);
$base-logo-title-color: #ffffff;
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;
-$base-sub-menu-background: #1f2d3d;
-$base-sub-menu-hover: #001528;
-
-// 鑷畾涔夋殫鑹茶彍鍗曢鏍�
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
+$base-sub-menu-background: var(--subMenuBg);
+$base-sub-menu-hover: var(--subMenuHover);
+$base-sub-menu-title-hover: var(--subMenuTitleHover);
+// 琛ㄥ崟澶磋儗鏅壊鍜屾爣棰橀鑹�
+$table-header-bg: var(--tableHeaderBg);
+$table-header-text-color: var(--tableHeaderTextColor);
$--color-primary: #409eff;
$--color-success: #67c23a;
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index de7b02c..c3eb9b2 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -106,7 +106,6 @@
<style lang="scss" scoped>
.pagination-container {
- background: #fff;
padding: 32px 16px;
.el-pagination{
float: v-bind(float);
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 960bc2d..d001ea8 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -181,7 +181,7 @@
height: 50px;
overflow: hidden;
position: relative;
- background: #fff;
+ //background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
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;
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 43b122f..d82ddf9 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -237,8 +237,8 @@
.tags-view-container {
height: 34px;
width: 100%;
- background: #fff;
- border-bottom: 1px solid #d8dce5;
+ background-color: var(--el-bg-color);
+ border: 1px solid var(--el-border-color-light);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper {
.tags-view-item {
@@ -247,13 +247,15 @@
cursor: pointer;
height: 26px;
line-height: 26px;
- border: 1px solid #d8dce5;
- color: #495060;
- background: #fff;
+ background-color: var(--el-bg-color);
+ border: 1px solid var(--el-border-color-light);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
+ &:hover {
+ color: var(--el-color-primary);
+ }
&:first-of-type {
margin-left: 15px;
}
@@ -279,7 +281,7 @@
}
.contextmenu {
margin: 0;
- background: #fff;
+ background: var(--el-bg-color);
z-index: 3000;
position: absolute;
list-style-type: none;
--
Gitblit v1.9.3