add DarkMode

src/assets/styles/index.scss

@@ -26,6 +26,10 @@ html {
   box-sizing: border-box;
 }
 
+html.dark .svg-icon, html.dark svg {
+  fill: var(--el-text-color-regular);
+}
+
 #app {
   height: 100%;
 }
@@ -200,4 +204,4 @@ aside {
     vertical-align: middle;
     margin-bottom: 10px;
   }
-}
+}

src/assets/styles/ruoyi.scss

@@ -90,8 +90,8 @@ h6 {
   .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
-      background-color: #f8f8f9 !important;
+      background-color: $table-header-bg !important;
-      color: #515a6e;
+      color: $table-header-text-color;
       height: 40px !important;
       font-size: 13px;
     }

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;
     }
   }
 

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 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color: #bfcbd9;
+$base-menu-color: var(--menuColor);
-$base-menu-color-active: #f4f4f5;
+$base-menu-hover: var(--menuHover);
-$base-menu-background: #304156;
+$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-background: var(--subMenuBg);
-$base-sub-menu-hover: #001528;
+$base-sub-menu-hover: var(--subMenuHover);
-
+$base-sub-menu-title-hover: var(--subMenuTitleHover);
-// 自定义暗色菜单风格
+// 表单头背景色和标题颜色
-/**
+$table-header-bg: var(--tableHeaderBg);
-$base-menu-color:hsla(0,0%,100%,.65);
+$table-header-text-color: var(--tableHeaderTextColor);
-$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;
-*/
 
 $--color-primary: #409eff;
 $--color-success: #67c23a;

src/components/Pagination/index.vue

@@ -106,7 +106,6 @@ function handleCurrentChange(val: number) {
 
 <style lang="scss" scoped>
 .pagination-container {
-  background: #fff;
   padding: 32px 16px;
   .el-pagination{
     float: v-bind(float);

src/layout/components/Navbar.vue

@@ -181,7 +181,7 @@ const handleCommand = (command: string) => {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  //background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {

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>
-      <h3 class="drawer-title">主题风格设置</h3>
+
-    </div>
     <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 sideTheme = ref(settingsStore.sideTheme);
 const storeSettings = computed(() => settingsStore);
 const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
 
-/** 是否需要topnav */
+// 是否暗黑模式
+const isDark = useDark({
+  storageKey: 'useDarkKey',
+  valueDark: 'dark',
+  valueLight: 'light',
+});
+const toggleDark = () => useToggle(isDark);
+
+/** 是否需要topNav */
 const topNav = computed({
     get: () => storeSettings.value.topNav,
     set: (val) => {
@@ -234,7 +248,6 @@ defineExpose({
 }
 
 .drawer-item {
-  color: rgba(0, 0, 0, 0.65);
   padding: 12px 0;
   font-size: 14px;
 

src/layout/components/TagsView/index.vue

@@ -237,8 +237,8 @@ onMounted(() => {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
+  background-color: var(--el-bg-color);
-  border-bottom: 1px solid #d8dce5;
+  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 @@ onMounted(() => {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
+      background-color: var(--el-bg-color);
-      color: #495060;
+      border: 1px solid var(--el-border-color-light);
-      background: #fff;
       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 @@ onMounted(() => {
   }
   .contextmenu {
     margin: 0;
-    background: #fff;
+    background: var(--el-bg-color);
     z-index: 3000;
     position: absolute;
     list-style-type: none;