diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index 12df51d..639556e 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -10,7 +10,20 @@ import ThemePicker from "@/components/ThemePicker"
 
 export default {
   name: "App",
-  components: { ThemePicker }
+  components: { ThemePicker },
+  computed: {
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
+    }
+  },
+  watch: {
+    sideTheme: {
+      immediate: true,
+      handler(val) {
+        document.documentElement.setAttribute('data-theme', val)
+      }
+    }
+  }
 }
 </script>
 <style scoped>
diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss
index ab4a1d2..a7c45da 100644
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -3,6 +3,15 @@
 * Copyright (c) 2019 ruoyi
 */
 
+/** 主题变量 **/
+:root[data-theme='theme-new'] {
+  --navbar-background: #1897fe;
+  --navbar-color: #ffffff;
+  --tags-view-background: #ffffff;
+  --tags-view-text-color: #495060;
+  --tags-view-item-background: #ffffff;
+}
+
 /** 基础通用 **/
 .pt5 {
   padding-top: 5px;
diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss
index 3558293..3c94d97 100644
--- a/ruoyi-ui/src/assets/styles/sidebar.scss
+++ b/ruoyi-ui/src/assets/styles/sidebar.scss
@@ -65,9 +65,95 @@
     }
 
     .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
+    border: none;
+    height: 100%;
+    width: 100% !important;
+
+    [data-theme='theme-light'] & {
+      .el-menu-item,
+      .el-submenu__title {
+        color: rgba(0,0,0,.70);
+        background-color: #ebebeb;
+
+        &:hover,
+        &:focus {
+          color: #2a7ffe !important;
+          background-color: #ebebeb !important;
+        }
+      }
+
+      .el-menu-item.is-active,
+      .el-submenu.is-active > .el-submenu__title {
+        color: #2a7ffe !important;
+        background-color: #ebebeb !important;
+      }
+
+      .el-submenu .el-menu-item {
+        background-color: #f5f5f5 !important;
+        padding-left: 34px !important;
+        padding-right: 20px !important;
+        width: calc(100% - 3px) !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        
+        &:hover,
+        &:focus {
+          color: #ffffff !important;
+          background-color: #2a7ffe !important;
+        }
+
+        &.is-active {
+          color: #ffffff !important;
+          background-color: #2a7ffe !important;
+          border-left: 3px solid #2a7ffe;
+          padding-left: 31px !important;
+        }
+      }
+    }
+
+    [data-theme='theme-new'] & {
+      .el-menu-item,
+      .el-submenu__title {
+        color: #495060;
+        background-color: #ffffff;
+
+        &:hover,
+        &:focus {
+          color: #1879da !important;
+          background-color: #ffffff !important;
+        }
+      }
+
+      .el-menu-item.is-active,
+      .el-submenu.is-active > .el-submenu__title {
+        color: #1879da !important;
+        background-color: #ffffff !important;
+      }
+
+      .el-submenu .el-menu-item {
+        background-color: #f5f5f5 !important;
+        padding-left: 34px !important;
+        padding-right: 20px !important;
+        width: calc(100% - 3px) !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        
+        &:hover,
+        &:focus {
+          color: #117ae0 !important;
+          background-color: #e4f5ff !important;
+        }
+
+        &.is-active {
+          color: #117ae0 !important;
+          background-color: #e4f5ff !important;
+          border-left: 3px solid #117ae0;
+          padding-left: 31px !important;
+        }
+      }
+    }
     }
 
     .el-menu-item, .el-submenu__title {
@@ -86,6 +172,7 @@
 
     & .theme-dark .is-active > .el-submenu__title {
       color: $base-menu-color-active !important;
+      background-color: $base-menu-background !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
@@ -100,9 +187,16 @@
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
       background-color: $base-sub-menu-background !important;
+      color: $base-menu-color !important;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
+        color: $base-sub-menu-hover-color !important;
+      }
+
+      &.is-active {
+        background-color: $base-sub-menu-hover !important;
+        color: $base-sub-menu-hover-color !important;
       }
     }
   }
diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss
index 34484d4..754ca89 100644
--- a/ruoyi-ui/src/assets/styles/variables.scss
+++ b/ruoyi-ui/src/assets/styles/variables.scss
@@ -10,32 +10,48 @@ $panGreen: #30B08F;
 
 // 默认菜单主题风格
 $base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color-active:#007dfe;
+$base-menu-background:#2c2e3d;
 $base-logo-title-color: #ffffff;
+$base-logo-title-background: #2c2e3d;
+$base-tags-view-background: #2c2e3d;
+$base-tags-view-color: #ffffff;
 
+$base-sub-menu-background:#383b46d0;
+$base-sub-menu-hover:#007dfe;
+$base-sub-menu-hover-color:#ffffff;
+
+// 浅色主题
 $base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
+$base-menu-light-color-active: #2a7ffe;
+$base-menu-light-background:#ebebeb;
+$base-logo-light-title-color: #000000;
+$base-logo-light-title-background: #ebebeb;
+$base-tags-view-light-background: #f6f6f6;
+$base-tags-view-light-color: #000000;
+$base-sub-menu-light-background: #f5f5f5;
+$base-sub-menu-light-hover: #2a7ffe;
+$base-sub-menu-light-hover-color: #ffffff;
 
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+// 新主题
+$base-menu-new-color:rgba(0,0,0,.70);
+$base-menu-new-background:#ebebeb;
+$base-logo-new-title-color: #000000;
+$base-logo-new-title-background: #1897fe;
+$base-tags-view-new-background: #1897fe;
+$base-tags-view-new-color: #ffffff;
 
-// 自定义暗色菜单风格
-/**
-$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-menu-new-color: $base-menu-light-color;
+$base-menu-new-color-active: #1879da;
+$base-menu-new-background: #ffffff;
+$base-logo-new-title-color: #ffffff;
+$base-sub-menu-new-background: #f5f5f5;
+$base-nav-new-background: #1897fe;
+$base-nav-new-color: #ffffff;
 
+// 侧边栏基础宽度，可以通过公式 200+8n 进行调整
 $base-sidebar-width: 200px;
 
 // the :export directive is the magic sauce for webpack
@@ -43,12 +59,34 @@ $base-sidebar-width: 200px;
 :export {
   menuColor: $base-menu-color;
   menuLightColor: $base-menu-light-color;
+  menuLightColorActive: $base-menu-light-color-active;
   menuColorActive: $base-menu-color-active;
+  subMenuLightBackground: $base-sub-menu-light-background;
+  subMenuLightHover: $base-sub-menu-light-hover;
+  subMenuLightHoverColor: $base-sub-menu-light-hover-color;
   menuBackground: $base-menu-background;
   menuLightBackground: $base-menu-light-background;
   subMenuBackground: $base-sub-menu-background;
   subMenuHover: $base-sub-menu-hover;
+  subMenuHoverColor: $base-sub-menu-hover-color;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  logoLightTitleColor: $base-logo-light-title-color;
+  // 新主题变量导出
+  menuNewColor: $base-menu-new-color;
+  menuNewColorActive: $base-menu-new-color-active;
+  menuNewBackground: $base-menu-new-background;
+  logoNewTitleColor: $base-logo-new-title-color;
+  logoTitleBackground: $base-logo-title-background;
+  logoLightTitleBackground: $base-logo-light-title-background;
+  logoNewTitleBackground: $base-logo-new-title-background;
+  subMenuNewBackground: $base-sub-menu-new-background;
+  navNewBackground: $base-nav-new-background;
+  navNewColor: $base-nav-new-color;
+  tagsViewBackground: $base-tags-view-background;
+  tagsViewColor: $base-tags-view-color;
+  tagsViewLightBackground: $base-tags-view-light-background;
+  tagsViewLightColor: $base-tags-view-light-color;
+  tagsViewNewBackground: $base-tags-view-new-background;
+  tagsViewNewColor: $base-tags-view-new-color
 }
diff --git a/ruoyi-ui/src/components/Breadcrumb/index.vue b/ruoyi-ui/src/components/Breadcrumb/index.vue
index 04cccc0..f348dc9 100644
--- a/ruoyi-ui/src/components/Breadcrumb/index.vue
+++ b/ruoyi-ui/src/components/Breadcrumb/index.vue
@@ -95,9 +95,27 @@ export default {
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
+
+  [data-theme='theme-new'] & {
+    color: #ffffff;
+
+    .el-breadcrumb__inner,
+    .el-breadcrumb__inner a {
+      color: #ffffff !important;
+    }
+
+    .el-breadcrumb__separator {
+      color: #ffffff !important;
+    }
+  }
+
   .no-redirect {
     color: #97a8be;
     cursor: text;
+
+    [data-theme='theme-new'] & {
+      color: #ffffff;
+    }
   }
 }
 </style>
diff --git a/ruoyi-ui/src/components/Hamburger/index.vue b/ruoyi-ui/src/components/Hamburger/index.vue
index 368b002..31d1863 100644
--- a/ruoyi-ui/src/components/Hamburger/index.vue
+++ b/ruoyi-ui/src/components/Hamburger/index.vue
@@ -30,12 +30,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .hamburger {
   display: inline-block;
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  fill: #5a5e66;
+
+  [data-theme='theme-new'] & {
+    fill: #ffffff;
+  }
 }
 
 .hamburger.is-active {
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index 5c31196..5e37e98 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -9,13 +9,13 @@
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
 
         <el-tooltip content="文档地址" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
@@ -55,8 +55,8 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+// import RuoYiGit from '@/components/RuoYi/Git'
+// import RuoYiDoc from '@/components/RuoYi/Doc'
 
 export default {
   emits: ['setLayout'],
@@ -67,8 +67,8 @@ export default {
     Screenfull,
     SizeSelect,
     Search,
-    RuoYiGit,
-    RuoYiDoc
+    // RuoYiGit,
+    // RuoYiDoc
   },
   computed: {
     ...mapGetters([
@@ -111,11 +111,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// 导航栏高度，可以通过公式 44+8n 进行调整
 .navbar {
-  height: 50px;
+  height: 44px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: var(--navbar-background, #fff);
+  color: var(--navbar-color, #5a5e66);
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
@@ -148,7 +150,7 @@ export default {
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 50px;
+    line-height: 44px;
 
     &:focus {
       outline: none;
@@ -159,7 +161,7 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: inherit;
       vertical-align: text-bottom;
 
       &.hover-effect {
diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue
index e1c26e0..b45dbd1 100644
--- a/ruoyi-ui/src/layout/components/Settings/index.vue
+++ b/ruoyi-ui/src/layout/components/Settings/index.vue
@@ -27,6 +27,16 @@
                 </i>
               </div>
             </div>
+            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-new')">
+              <img src="@/assets/images/new.svg" alt="new">
+              <div v-if="sideTheme === 'theme-new'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+                <i aria-label="图标: check" class="anticon anticon-check">
+                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
+                    <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
+                  </svg>
+                </i>
+              </div>
+            </div>
           </div>
 
           <div class="drawer-item">
diff --git a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
index 4ec53eb..6e7adb8 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.logoTitleBackground : (sideTheme === 'theme-new' ? variables.logoNewTitleBackground : variables.logoLightTitleBackground) }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
+        <img v-if="logo" />
+        <h1 v-else class="sidebar-title"  :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : (sideTheme === 'theme-new' ? variables.logoNewTitleColor : variables.logoLightTitleColor) }">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
+        <img v-if="logo" />
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : (sideTheme === 'theme-new' ? variables.logoNewTitleColor : variables.logoLightTitleColor) }">{{ title }} </h1>
       </router-link>
     </transition>
   </div>
@@ -55,9 +57,9 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
+  height: 44px;
   line-height: 50px;
-  background: #2b2f3a;
+
   text-align: center;
   overflow: hidden;
 
@@ -78,7 +80,7 @@ export default {
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 14px;
+      font-size: 17px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }
diff --git a/ruoyi-ui/src/layout/components/Sidebar/index.vue b/ruoyi-ui/src/layout/components/Sidebar/index.vue
index cd86ea6..ebfc060 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/index.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : (settings.sideTheme === 'theme-new' ? variables.menuNewBackground : variables.menuLightBackground) }">
         <logo v-if="showLogo" :collapse="isCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : (settings.sideTheme === 'theme-new' ? variables.menuNewBackground : variables.menuLightBackground)"
+                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : (settings.sideTheme === 'theme-new' ? variables.menuNewColor : variables.menuLightColor)"
                 :unique-opened="true"
-                :active-text-color="settings.theme"
+                :active-text-color="settings.sideTheme === 'theme-dark' ? variables.menuColorActive : (settings.sideTheme === 'theme-new' ? variables.menuNewColorActive : variables.menuLightColorActive)"
                 :collapse-transition="false"
                 mode="vertical"
             >
diff --git a/ruoyi-ui/src/layout/components/TagsView/index.vue b/ruoyi-ui/src/layout/components/TagsView/index.vue
index 5ca5fff..fcaa11a 100644
--- a/ruoyi-ui/src/layout/components/TagsView/index.vue
+++ b/ruoyi-ui/src/layout/components/TagsView/index.vue
@@ -31,6 +31,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import variables from '@/assets/styles/variables.scss'
 
 export default {
   components: { ScrollPane },
@@ -52,6 +53,9 @@ export default {
     },
     theme() {
       return this.$store.state.settings.theme
+    },
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
     }
   },
   watch: {
@@ -77,10 +81,12 @@ export default {
     },
     activeStyle(tag) {
       if (!this.isActive(tag)) return {}
-      return {
-        "background-color": this.theme,
-        "border-color": this.theme
+      const style = {
+        "background-color": this.sideTheme === 'theme-dark' ? '#515466' : (this.sideTheme === 'theme-new' ? variables.tagsViewNewBackground : variables.tagsViewLightBackground),
+        "color": this.sideTheme === 'theme-dark' ? '#ffffff' : (this.sideTheme === 'theme-new' ? variables.tagsViewNewColor : variables.tagsViewLightColor),
+        "border-color": "#ccc"
       }
+      return style
     },
     isAffix(tag) {
       return tag.meta && tag.meta.affix
@@ -235,9 +241,9 @@ export default {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 32px;
   width: 100%;
-  background: #fff;
+  background: var(--tags-view-background, #fff);
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
   .tags-view-wrapper {
@@ -245,11 +251,11 @@ export default {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      height: 26px;
-      line-height: 26px;
+      height: 24px;
+      line-height: 24px;
       border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
+      color: var(--tags-view-text-color, #495060);
+      background: var(--tags-view-item-background, #fff);
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -261,12 +267,10 @@ export default {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        border-color: #d8dce5;
         &::before {
           content: '';
-          background: #fff;
+          background: currentColor;
           display: inline-block;
           width: 8px;
           height: 8px;
diff --git a/ruoyi-ui/src/settings.js b/ruoyi-ui/src/settings.js
index 71a3a92..f7d1453 100644
--- a/ruoyi-ui/src/settings.js
+++ b/ruoyi-ui/src/settings.js
@@ -5,9 +5,9 @@ module.exports = {
   title: process.env.VUE_APP_TITLE,
 
   /**
-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light，新主题theme-new
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-new',
 
   /**
    * 是否系统布局配置
diff --git a/ruoyi-ui/src/views/bas/BasSupplier/index.vue b/ruoyi-ui/src/views/bas/BasSupplier/index.vue
index 087df9a..859f26f 100644
--- a/ruoyi-ui/src/views/bas/BasSupplier/index.vue
+++ b/ruoyi-ui/src/views/bas/BasSupplier/index.vue
@@ -480,3 +480,10 @@ export default {
   }
 }
 </script>
+<style scoped>
+.el-form-item >>> .el-form-item__label {
+  white-space: nowrap;
+  width: auto;
+  min-width: fit-content;
+}
+</style>