1、重置主题背景色

src/assets/style/theme/lng-theme.less

@@ -21,6 +21,10 @@
     margin-left: 0 !important;
   }
 
+  .vben-app-logo__title{
+     color: var(--text-color) !important;
+  }
+
   .vben-layout-header-left {
 
     .vben-layout-header-trigger{
@@ -165,56 +169,9 @@
   }
 
 }
-/**
+
- * 主题2
- */
 .lng-theme-theme2 {
 
-  .vben-layout-sideBar {
-    background: unset !important;
-    background-image: url('/@/assets/style/theme/imgs/theme2-left.png') !important;
-    background-size: 100% 100% !important;
-  }
-
-  .ant-layout-header{
-    background: unset !important;
-    background-image: url('/@/assets/style/theme/imgs/theme2-top.png') !important;
-    background-size: 100% 100% !important;
-  }
-
-}
-/**
- * 主题3
- */
-.lng-theme-theme3 {
-
-  .vben-layout-sideBar {
-    background: unset !important;
-    background-image: url('/@/assets/style/theme/imgs/theme3-left.png') !important;
-    background-size: 100% 100% !important;
-  }
-
-  .ant-layout-header{
-    background: unset !important;
-    background-image: url('/@/assets/style/theme/imgs/theme3-top.png') !important;
-    background-size: 100% 100% !important;
-  }
-
-}
-/**
- * 主题4
- */
-.lng-theme-theme4 {
-
-  .vben-layout-sideBar {
-    background: unset !important;
-    background-image: url('/@/assets/style/theme/imgs/theme4-left.png') !important;
-    background-size: 100% 100% !important;
-  }
-
-   /**
-    * 左边菜单主题
-    */
   .lng-menu {
     .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
       background: unset !important;
@@ -231,6 +188,78 @@
       color: var(--text-color) !important;
   }
 
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme2-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme2-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+
+.lng-theme-theme3 {
+
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+      color: var(--text-color) !important;
+  }
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme3-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme3-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+
+.lng-theme-theme4 {
+
+
+
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+      color: var(--text-color) !important;
+  }
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme4-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
   .ant-layout-header{
     background: unset !important;
     background-image: url('/@/assets/style/theme/imgs/theme4-top.png') !important;
@@ -238,11 +267,29 @@
   }
 
 }
-/**
+
- * 主题5
- */
 .lng-theme-theme5 {
 
+  .vben-app-logo__title{
+     color: var(--text-color) !important;
+  }
+
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+    color: var(--text-color) !important;
+  }
+
   .vben-layout-sideBar {
     background: unset !important;
     background-image: url('/@/assets/style/theme/imgs/theme5-left.png') !important;
@@ -256,11 +303,25 @@
   }
 
 }
-/**
+
- * 主题6
- */
 .lng-theme-theme6 {
 
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+    color: var(--text-color) !important;
+  }
+
   .vben-layout-sideBar {
     background: unset !important;
     background-image: url('/@/assets/style/theme/imgs/theme6-left.png') !important;
@@ -274,14 +335,10 @@
   }
 
 }
-/**
+
- * 主题7
+
- */
 .lng-theme-theme7 {
 
-  /**
-    * 左边菜单主题
-    */
   .lng-menu {
     .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
       background: unset !important;
@@ -311,14 +368,9 @@
   }
 
 }
-/**
+
- * 主题8
- */
 .lng-theme-theme8 {
 
-   /**
-    * 左边菜单主题
-    */
   .lng-menu {
     .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
       background: unset !important;
@@ -348,3 +400,57 @@
   }
 
 }
+
+/**
+ * 主题9
+ */
+.lng-theme-theme9 {
+
+  .lng-menu {
+    .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{
+      background: unset !important;
+      color: #000 !important;
+
+      .vben-menu-submenu-title-active:not(.vben-menu-submenu){
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
+      }
+    } 
+  }
+
+  .ant-menu-title-content{
+      color: var(--text-color);
+  }
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme9-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme9-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+
+/**
+ * 主题10
+ */
+.lng-theme-theme10 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme10-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme10-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}

src/utils/theme.ts

@@ -32,17 +32,19 @@ export const ThemeType = {
   PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', borderColor: '#0960bd', backColor: '#0960bd', textColor: '#fff', hoverBackColor: '#0960bd',hoverTextColor: '#fff', activeBackColor: '#004496', activeTextColor: '#fff' }),
   LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', borderColor: '#01768C', backColor: '#01768C', textColor: '#fff', hoverBackColor: '#00889D',hoverTextColor: '#fff', activeBackColor: '#005B6E', activeTextColor: '#fff' }),
   THEME1: new ThemeInfo('THEME1', { class: 'lng-theme-theme1', borderColor: '#2070B5', backColor: '#2070B5', textColor: '#fff', hoverBackColor: '#10A4C0',hoverTextColor: '#fff', activeBackColor: '#059ABA', activeTextColor: '#fff' }),
-  THEME2: new ThemeInfo('THEME2', { class: 'lng-theme-theme2', borderColor: '#6834D2', backColor: '#6834D2', textColor: '#fff', hoverBackColor: '#0487D1',hoverTextColor: '#fff', activeBackColor: '#7330CD', activeTextColor: '#fff' }),
+  THEME2: new ThemeInfo('THEME2', { class: 'lng-theme-theme2', borderColor: '#0B4A99', backColor: '#0B4A99', textColor: '#000', hoverBackColor: '#1664A7',hoverTextColor: '#000', activeBackColor: '#127498', activeTextColor: '#000' }),
-  THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#2451C3', backColor: '#2451C3', textColor: '#fff', hoverBackColor: '#0498DE',hoverTextColor: '#fff', activeBackColor: '#056CC4', activeTextColor: '#fff' }),
+  THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#82B802', backColor: '#82B802', textColor: '#000', hoverBackColor: '#B5D783',hoverTextColor: '#000', activeBackColor: '#568A02', activeTextColor: '#000' }),
-  THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#6bb836', backColor: '#6bb836', textColor: '#000', hoverBackColor: '#A2DE79',hoverTextColor: '#000', activeBackColor: '#A2DE79', activeTextColor: '#000' }),
+  THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#406872', backColor: '#406872', textColor: '#000', hoverBackColor: '#3BA5C1',hoverTextColor: '#000', activeBackColor: '#416961', activeTextColor: '#000' }),
-  THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#0B0023', backColor: '#0B0023', textColor: '#fff', hoverBackColor: '#7A0589',hoverTextColor: '#fff', activeBackColor: '#4A0353', activeTextColor: '#fff' }),
+  THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#E05FB2', backColor: '#E05FB2', textColor: '#000', hoverBackColor: '#F0A4A6',hoverTextColor: '#000', activeBackColor: '#D1178E', activeTextColor: '#000' }),
-  THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#02311F', backColor: '#02311F', textColor: '#fff', hoverBackColor: '#007261',hoverTextColor: '#fff', activeBackColor: '#00553D', activeTextColor: '#fff' }),
+  THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#5AB712', backColor: '#5AB712', textColor: '#000', hoverBackColor: '#9DDB6C',hoverTextColor: '#000', activeBackColor: '#90DE55', activeTextColor: '#000' }),
   THEME7: new ThemeInfo('THEME7', { class: 'lng-theme-theme7', borderColor: '#35b3a9', backColor: '#35b3a9', textColor: '#000', hoverBackColor: '#C8FCF7',hoverTextColor: '#000', activeBackColor: '#67CBC4', activeTextColor: '#000' }),
-  THEME8: new ThemeInfo('THEME8', { class: 'lng-theme-theme8', borderColor: '#53779B', backColor: '#53779B', textColor: '#000', hoverBackColor: '#86A2BA',hoverTextColor: '#000', activeBackColor: '#6084A8', activeTextColor: '#000' }),
+  THEME8: new ThemeInfo('THEME8', { class: 'lng-theme-theme8', borderColor: '#BD2D18', backColor: '#BD2D18', textColor: '#000', hoverBackColor: '#ED7967',hoverTextColor: '#000', activeBackColor: '#D8503E', activeTextColor: '#000' }),
+  THEME9: new ThemeInfo('THEME9', { class: 'lng-theme-theme9', borderColor: '#3950E0', backColor: '#3950E0', textColor: '#000', hoverBackColor: '#5D71EA',hoverTextColor: '#000', activeBackColor: '#081FB7', activeTextColor: '#000' }),
+  THEME10: new ThemeInfo('THEME10', { class: 'lng-theme-theme10', borderColor: '#A5583E', backColor: '#A5583E', textColor: '#fff', hoverBackColor: '#D37658',hoverTextColor: '#fff', activeBackColor: '#DB4D1F', activeTextColor: '#fff' }),
 }
 
-export const ThemeList = [ThemeType.PRIMARY, ThemeType.LIGHT,ThemeType.THEME1,ThemeType.THEME2,
+export const ThemeList = [ThemeType.THEME1,ThemeType.THEME2,ThemeType.THEME3,ThemeType.THEME4,ThemeType.THEME5,
-  ThemeType.THEME3,ThemeType.THEME5,ThemeType.THEME6,ThemeType.THEME4,ThemeType.THEME7,ThemeType.THEME8];
+            ThemeType.THEME6,ThemeType.THEME7,ThemeType.THEME8,ThemeType.THEME9,ThemeType.THEME10];
 
 export class AppThemeType {