修改后台样式

app/admin/view/config/system.html

@@ -19,7 +19,7 @@
         <div class="layui-form-item">
             <div class="help-label label-required-prev"><b>后台默认主题</b>Theme</div>
             <div class="layui-input">
-                {foreach ['default'=>'默认主题','white'=>'简约白色','black'=>'精典黑色'] as $k=>$v}
+                {foreach ['default'=>'默认色','white'=>'简约白','black'=>'精典黑','red'=>'玫瑰红','blue'=>'天空蓝'] as $k=>$v}
                 <label class="think-radio">
                     {if sysconf('base.site_theme') eq $k}
                     <input name="site_theme" type="radio" value="{$k}" lay-ignore checked> {$v}

public/static/theme/css/_config.less

@@ -43,7 +43,7 @@
 @TopHeaderNavActiveBackColor: rgba(0, 0, 0, 0.10);
 
 // 左侧菜单布局颜色
-@LeftMainBackColor: #393D49 !important;
+@LeftMainBackColor: #20222A !important;
 
 @LeftMainNavHoverBackColor: rgba(99, 99, 99, 0.2);
 @LeftMainNavHoverTextColor: #FFF;

public/static/theme/css/_layout.less

@@ -154,6 +154,7 @@
       overflow: hidden;
       position: relative;
       text-align: center;
+      box-shadow: none !important;
       line-height: @TopHeaderHeight;
       border-bottom: @TopHeaderBottomLine;
 
@@ -227,8 +228,8 @@
       .layui-side-icon:after,
       .layui-side-tree:after {
         height: @TopHeaderHeight;
-        display: block;
         content: '';
+        display: block;
       }
 
       .layui-nav-tree {
@@ -245,19 +246,14 @@
       }
 
       .layui-nav-item {
-        border-bottom: @TopHeaderBottomLine;
+        // border-bottom: @TopHeaderBottomLine;
 
-        > a {
-          background: rgba(100, 100, 100, .30) !important;
-
-          &:hover {
-            background-color: rgba(100, 100, 100, .35) !important;
-          }
+        > a:hover {
+          // background-color: rgba(100, 100, 100, .2) !important;
         }
 
         .layui-nav-child {
           padding: 0;
-          background-color: unset !important;
         }
 
         dd, dd > a {
@@ -279,12 +275,6 @@
           line-height: 45px;
           padding-top: 0;
           padding-bottom: 0;
-          color: @LeftMainNavNormalTextColor;
-
-          &:hover {
-            color: @LeftMainNavHoverTextColor;
-            background: @LeftMainNavHoverBackColor
-          }
 
           .nav-icon {
             padding-right: 5px;
@@ -396,6 +386,10 @@
       display: none !important
     }
 
+    .layui-side-target:before {
+      transform: rotate(0deg);
+    }
+
     .layui-nav-item {
       a {
         padding: 0

public/static/theme/css/_layout_.less

@@ -0,0 +1,71 @@
+> .layui-header {
+  background: @headNormalBackColor;
+
+  .layui-nav-item {
+    &.layui-this > a {
+      color: @headActionTextColor;
+      background: @headActiveBackColor;
+    }
+
+    > a {
+      color: @headNormalTextColor;
+
+      &:hover {
+        color: @headActionTextColor;
+      }
+    }
+  }
+}
+
+> .layui-body {
+  > .think-page-body > .layui-card > .layui-card-header {
+    box-sizing: border-box;
+    border-bottom: @TopHeaderBottomLine;
+  }
+}
+
+.layui-side {
+
+  .layui-logo {
+    color: #FFF;
+    box-shadow: none;
+    font-weight: bold;
+  }
+
+  .layui-side-scroll {
+    display: flex !important;
+    box-sizing: border-box;
+    border-right: @TopHeaderBottomLine;
+
+    .layui-side-icon {
+      display: none;
+    }
+
+    .layui-side-tree {
+      flex: 1;
+
+      .layui-nav-item {
+
+        a {
+          color: @leftNormalTextColor;
+          border-bottom: none !important;
+
+          &:hover {
+            color: @leftActiveTextColor;
+          }
+        }
+
+        .layui-this, &.layui-this {
+          > a {
+            color: @leftActiveTextColor;
+            background: @leftActiveBackColor;
+          }
+        }
+
+        &ed > a {
+          color: @leftActiveTextColor;
+        }
+      }
+    }
+  }
+}

public/static/theme/css/_layout_black.less

@@ -1,95 +1,25 @@
 @charset "UTF-8";
 @import "_config.less";
 
-.layui-layout-theme-black {
-  &.layui-layout-left-mini {
-    > .layui-side .layui-side-target:before {
-      transform: rotate(0deg);
-    }
-  }
-
-  > .layui-header {
-    background: #393D49 !important;
-
-    .layui-nav-item {
-      &.layui-this > a {
-        color: #ffffff !important;
-        background: #098 !important;
-      }
-
-      > a {
-        color: #fefefe !important;
-
-        &:hover {
-          color: #ffffff !important;
-        }
-      }
-    }
-  }
-
-  > .layui-body {
-    > .think-page-body > .layui-card > .layui-card-header {
-      box-sizing: border-box;
-      box-shadow: none !important;
-      border-bottom: @TopHeaderBottomLine;
-    }
-  }
 
-  .layui-side {
-
-    .layui-logo {
-      color: #fff;
-      box-shadow: none;
-      font-weight: bold;
-    }
-
-    .layui-side-scroll {
-      display: flex !important;
-      box-sizing: border-box;
-      border-right: @TopHeaderBottomLine;
-
-      .layui-side-icon {
-        width: 60px;
-        display: none;
-
-        a {
-          height: 60px;
-          display: block;
-          text-align: center;
-          line-height: 60px;
-        }
-
-        .layui-icon {
-          color: #fff;
-        }
-      }
+.layui-layout-theme-black {
+  @mainActiveBack: #23262E !important;
+  @mainNormalBack: rgba(0, 0, 0, 0.1) !important;
 
-      .layui-side-tree {
-        flex: 1;
+  @mainActionText: #FFFFFF !important;
+  @mainNormalText: #EEEEEE !important;
 
-        .layui-nav-item {
-          border-bottom-color: rgba(0, 0, 0, 0);
+  @headNormalBackColor: @mainActiveBack;
+  @headActiveBackColor: #098 !important;
 
-          a {
-            color: #fff !important;
-            border-bottom: none !important;
+  @headNormalTextColor: @mainNormalText;
+  @headActionTextColor: @mainActionText;
 
-            &:hover {
-              color: #fff !important;
-            }
-          }
+  @leftNormalTextColor: @mainNormalText;
+  @leftActiveTextColor: @mainActionText;
 
-          .layui-this, &.layui-this {
-            > a {
-              color: #fff !important;
-            }
-          }
+  @leftNormalBackColor: @mainNormalBack;
+  @leftActiveBackColor: #098 !important;
 
-          &ed > a {
-            color: #fff !important;
-          }
-        }
-      }
-    }
-  }
+  @import (multiple)"_layout_.less";
 }

public/static/theme/css/_layout_blue.less

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+@import "_config.less";
+
+
+.layui-layout-theme-blue {
+  @mainActiveBack: #1890FF !important;
+  @mainNormalBack: rgba(0, 0, 0, 0.1) !important;
+
+  @mainActionText: #FFFFFF !important;
+  @mainNormalText: #EEEEEE !important;
+
+  @headNormalBackColor: @mainActiveBack;
+  @headActiveBackColor: @mainNormalBack;
+
+  @headNormalTextColor: @mainNormalText;
+  @headActionTextColor: @mainActionText;
+
+  @leftNormalTextColor: @mainNormalText;
+  @leftActiveTextColor: @mainActionText;
+
+  @leftNormalBackColor: @mainNormalBack;
+  @leftActiveBackColor: @mainActiveBack;
+
+  @import (multiple)"_layout_.less";
+}

public/static/theme/css/_layout_red.less

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import "_config.less";
+
+.layui-layout-theme-red {
+  @mainActiveBack: #AA3130 !important;
+  @mainNormalBack: rgba(0, 0, 0, 0.1) !important;
+
+  @mainActionText: #FFFFFF !important;
+  @mainNormalText: #EEEEEE !important;
+
+  @headNormalBackColor: @mainActiveBack;
+  @headActiveBackColor: @mainNormalBack;
+
+  @headNormalTextColor: @mainNormalText;
+  @headActionTextColor: @mainActionText;
+
+  @leftNormalTextColor: @mainNormalText;
+  @leftActiveTextColor: @mainActionText;
+
+  @leftNormalBackColor: @mainNormalBack;
+  @leftActiveBackColor: @mainActiveBack;
+
+  @import (multiple)"_layout_.less";
+}

public/static/theme/css/_layout_white.less

@@ -2,11 +2,6 @@
 @import "_config.less";
 
 .layui-layout-theme-white {
-  &.layui-layout-left-mini {
-    > .layui-side .layui-side-target:before {
-      transform: rotate(0deg);
-    }
-  }
 
   > .layui-header {
     background: none !important;
@@ -51,6 +46,10 @@
       box-sizing: border-box;
       border-right: @TopHeaderBottomLine;
 
+      .layui-nav-child {
+        background: none !important;
+      }
+
       .layui-side-icon {
         width: 60px;
         display: none;

public/static/theme/css/console.less

@@ -66,5 +66,7 @@ body {
 @import '_custom.less';
 @import '_display.less';
 @import '_layout.less';
+@import '_layout_red.less';
+@import '_layout_blue.less';
 @import '_layout_white.less';
 @import '_layout_black.less';