---修改主题功能

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

@@ -1,83 +1,350 @@
+:root {
+  --border-color: unset;
+  --back-color: unset;
+  --text-color: unset;
+  --hover-back-color: unset;
+  --hover-text-color: unset;
+  --active-back-color: unset;
+  --active-text-color: unset;
+
+  --menu-top-color: #fff;
+  --menu-top-bg-color: unset;
+  
+}
 
 
-.lng-theme-primary {
+.lng-theme {
+  /**
+   * 侧边栏主题
+   */
+  .vben-default-layout-main{
+    margin-left: 0 !important;
+  }
+
+  .vben-layout-header-left {
+
+    .vben-layout-header-trigger{
+      svg {
+        fill: var(--text-color) !important;
+      }
+
+      &.light:hover {
+        background-color: var(--hover-back-color) !important;
+              
+        svg {
+          fill: var(--hover-text-color) !important;
+          color: var(--hover-text-color) !important;
+        }
+      }
+    }
+  }
+
+   /**
+    * 左边菜单主题
+    */
   .lng-menu {
     .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu{
       background: unset !important;
 
       .vben-menu-submenu-title-active:not(.vben-menu-submenu){
-         color: #fff !important;
-         background-color: rgba(0, 0, 0, 0.4) !important;
+        color: #fff !important;
+        background-color: rgba(0, 0, 0, 0.4) !important;
       }
     } 
   }
 
-  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
-    border-bottom: 2px solid #fff;
-    right: 10px;
-    left: 10px;
-    bottom: 4px;
+  /**
+   * 顶部菜单主题
+  */
+  .ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after {
+      bottom: 4px;
+      right: 10px;
+      left: 10px;
+    }
 
-    .ant-menu-title-content{
-       color: #000 !important;
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
+      border-bottom: 2px solid #fff;
+      right: 10px;
+      left: 10px;
+      bottom: 4px;
+    }
+
+  .vben-menu-dark.vben-menu-vertical .vben-menu-item:hover, .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title:hover {
+    background-color: var(--hover-back-color) !important;
+    color: var(--hover-text-color) !important;
+  }
+
+  .vben-layout-breadcrumb.ant-menu .ant-menu-item {
+    &.ant-menu-item-selected{
+      background-color: rgba(0, 0, 0, 0.4) !important;
+      color: var(--active-text-color) !important;
+    }
+
+
+    &:hover{
+      background-color: var(--hover-back-color) !important;
+      color: var(--hover-text-color) !important;
     }
   }
 
+
+  .vben-layout-header-action {
+    svg {
+      fill: var(--text-color) !important;
+      color: var(--text-color) !important;
+    }
+
+    .vben-layout-header-action__item:hover{
+      background-color: var(--hover-back-color) !important;
+
+      svg {
+        fill: var(--text-color) !important;
+        color: var(--text-color) !important;
+      }
+    }
+  }
+
+  .vben-header-user-dropdown__name{
+    color: var(--text-color) !important;
+  }
+
+  .vben-header-user-dropdown--light:hover{
+    background-color: var(--hover-back-color) !important;
+  }
+
+  .ant-menu-title-content{
+    color: #fff;
+  }
+
+}
+
+.lng-theme-primary {
   .vben-layout-sideBar {
     background: unset !important;
     background-image: url('/@/assets/style/theme/imgs/primary-left.png') !important;
     background-size: 100% 100% !important;
   }
 
-
-  .vben-default-layout-main{
-    margin-left: 0px !important;
-  }
-
   .ant-layout-header{
-      background: unset !important;
-      background-image: url('/@/assets/style/theme/imgs/primary-top.png') !important;
-      background-size: 100% 100% !important;
-
-      .vben-layout-header-left {
-
-        .vben-layout-header-trigger{
-            svg {
-              fill: #fff !important;
-            }
-
-            &.light:hover {
-              background-color: unset !important;
-              
-               svg {
-                  fill: #5e95ff !important;
-                }
-            }
-        }
-      }
-
-      .ant-menu-title-content{
-        color: #fff !important;
-      }
-
-      .vben-layout-header-action {
-         svg {
-           fill: #fff !important;
-           color: #fff !important;
-         }
-
-         .vben-layout-header-action__item:hover{
-            background-color: #0960bd !important;
-         }
-      }
-
-      .vben-header-user-dropdown__name{
-        color: #fff !important;
-      }
-
-      .vben-header-user-dropdown--light:hover{
-        background-color: #0960bd !important;
-      }
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/primary-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+
+
+.lng-theme-light {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/light-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/light-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+
+.lng-theme-theme1 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme1-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme1-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题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;
+      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;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme4-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题5
+ */
+.lng-theme-theme5 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme5-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme5-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题6
+ */
+.lng-theme-theme6 {
+
+  .vben-layout-sideBar {
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme6-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme6-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题7
+ */
+.lng-theme-theme7 {
+
+  /**
+    * 左边菜单主题
+    */
+  .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/theme7-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme7-top.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+}
+/**
+ * 主题8
+ */
+.lng-theme-theme8 {
+
+   /**
+    * 左边菜单主题
+    */
+  .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/theme8-left.png') !important;
+    background-size: 100% 100% !important;
+  }
+
+  .ant-layout-header{
+    background: unset !important;
+    background-image: url('/@/assets/style/theme/imgs/theme8-top.png') !important;
+    background-size: 100% 100% !important;
   }
 
 }