🔥主题文件已开源不再需要加群获取

src/styles/themes/dark.scss

@@ -2,3 +2,123 @@
  * @copyright chuzhixin 1204505056@qq.com
  * @description 暗黑之子主题（VIP群专享）
  */
+@charset "utf-8";
+
+.vue-admin-beautiful-theme-dark {
+  $base-menu-background: #2e2f34;
+  $base-menu-background-active: #000;
+  $base-color-blue: #000;
+
+  color: #fff !important;
+  background-color: #2e2f34 !important;
+
+  *:not(a):not([class*="svg"]):not(.el-drawer__wrapper):not(.el-drawer__container) {
+    color: #fff !important;
+    background-color: #2e2f34 !important;
+    border-color: #999 !important;
+    box-shadow: none !important;
+  }
+
+  .is-active:not(li) {
+    *:not(a):not([class*="svg"]) {
+      color: #fff !important;
+      background-color: #000 !important;
+      border-color: #999 !important;
+    }
+  }
+
+  .svg-external-icon {
+    color: #fff !important;
+  }
+
+  .el-scrollbar__bar {
+    display: none;
+  }
+
+  @mixin container {
+    background: $base-menu-background !important;
+  }
+
+  @mixin active {
+    &:hover {
+      background-color: $base-menu-background-active !important;
+    }
+
+    &.is-active {
+      background-color: $base-menu-background-active !important;
+    }
+  }
+
+  .logo-container-horizontal {
+    @include container;
+  }
+
+  .logo-container-vertical {
+    @include container;
+  }
+
+  .el-menu {
+    @include container;
+
+    .el-submenu__title {
+      @include container;
+    }
+
+    .el-menu-item {
+      @include container;
+    }
+  }
+
+  .side-bar-container {
+    @include container;
+
+    .el-menu-item {
+      @include active;
+    }
+  }
+
+  .top-bar-container {
+    @include container;
+
+    .vab-main {
+      @include container;
+
+      .el-menu {
+        &--horizontal {
+          .el-submenu,
+          .el-menu-item {
+            &.is-active {
+              background-color: $base-menu-background-active !important;
+            }
+          }
+
+          > .el-menu-item {
+            &.is-active {
+              border-bottom: 3px solid $base-menu-background-active !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tags-bar-container {
+    background: $base-color-white;
+    border-top: 1px solid #f6f6f6;
+
+    .tags-content {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            background: $base-color-blue !important;
+            border: 1px solid $base-color-blue !important;
+          }
+        }
+      }
+    }
+  }
+
+  .theme-bar-setting {
+    background: $base-color-blue !important;
+  }
+}

src/styles/themes/glory.scss

@@ -2,3 +2,97 @@
  * @copyright chuzhixin 1204505056@qq.com
  * @description 荣耀典藏主题（VIP群专享）
  */
+@charset "utf-8";
+
+.vue-admin-beautiful-theme-glory {
+  $base-menu-background: #2e2f34;
+  $base-menu-background-active: #f6ca9d;
+  $base-color-blue: #f6ca9d;
+
+  @mixin container {
+    background: $base-menu-background !important;
+  }
+
+  @mixin active {
+    &:hover {
+      background-color: $base-menu-background-active !important;
+    }
+
+    &.is-active {
+      background-color: $base-menu-background-active !important;
+    }
+  }
+
+  .logo-container-horizontal {
+    @include container;
+  }
+
+  .logo-container-vertical {
+    @include container;
+  }
+
+  .el-menu {
+    @include container;
+
+    .el-submenu__title {
+      @include container;
+    }
+
+    .el-menu-item {
+      @include container;
+    }
+  }
+
+  .side-bar-container {
+    @include container;
+
+    .el-menu-item {
+      @include active;
+    }
+  }
+
+  .top-bar-container {
+    @include container;
+
+    .vab-main {
+      @include container;
+
+      .el-menu {
+        &--horizontal {
+          .el-submenu,
+          .el-menu-item {
+            &.is-active {
+              background-color: $base-menu-background-active !important;
+            }
+          }
+
+          > .el-menu-item {
+            &.is-active {
+              border-bottom: 3px solid $base-menu-background-active !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tags-bar-container {
+    background: $base-color-white;
+    border-top: 1px solid #f6f6f6;
+
+    .tags-content {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            background: $base-color-blue !important;
+            border: 1px solid $base-color-blue !important;
+          }
+        }
+      }
+    }
+  }
+
+  .theme-bar-setting {
+    background: $base-color-blue !important;
+  }
+}

src/styles/themes/green.scss

@@ -2,3 +2,97 @@
  * @copyright chuzhixin 1204505056@qq.com
  * @description 绿荫操场主题（VIP群专享）
  */
+@charset "utf-8";
+
+.vue-admin-beautiful-theme-green {
+  $base-menu-background: #16181d;
+  $base-menu-background-active: #009688;
+  $base-color-blue: #009688;
+
+  @mixin container {
+    background: $base-menu-background !important;
+  }
+
+  @mixin active {
+    &:hover {
+      background-color: $base-menu-background-active !important;
+    }
+
+    &.is-active {
+      background-color: $base-menu-background-active !important;
+    }
+  }
+
+  .logo-container-horizontal {
+    @include container;
+  }
+
+  .logo-container-vertical {
+    @include container;
+  }
+
+  .el-menu {
+    @include container;
+
+    .el-submenu__title {
+      @include container;
+    }
+
+    .el-menu-item {
+      @include container;
+    }
+  }
+
+  .side-bar-container {
+    @include container;
+
+    .el-menu-item {
+      @include active;
+    }
+  }
+
+  .top-bar-container {
+    @include container;
+
+    .vab-main {
+      @include container;
+
+      .el-menu {
+        &--horizontal {
+          .el-submenu,
+          .el-menu-item {
+            &.is-active {
+              background-color: $base-menu-background-active !important;
+            }
+          }
+
+          > .el-menu-item {
+            &.is-active {
+              border-bottom: 3px solid $base-menu-background-active !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tags-bar-container {
+    background: $base-color-white;
+    border-top: 1px solid #f6f6f6;
+
+    .tags-content {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            background: $base-color-blue !important;
+            border: 1px solid $base-color-blue !important;
+          }
+        }
+      }
+    }
+  }
+
+  .theme-bar-setting {
+    background: $base-color-blue !important;
+  }
+}

src/styles/themes/ocean.scss

@@ -2,3 +2,97 @@
  * @copyright chuzhixin 1204505056@qq.com
  * @description 海洋之心主题（VIP群专享）
  */
+@charset "utf-8";
+
+.vue-admin-beautiful-theme-ocean {
+  $base-menu-background: #0366d6;
+  $base-menu-background-active: #0054b3;
+  $base-color-blue: #0366d6;
+
+  @mixin container {
+    background: $base-menu-background !important;
+  }
+
+  @mixin active {
+    &:hover {
+      background-color: $base-menu-background-active !important;
+    }
+
+    &.is-active {
+      background-color: $base-menu-background-active !important;
+    }
+  }
+
+  .logo-container-horizontal {
+    @include container;
+  }
+
+  .logo-container-vertical {
+    @include container;
+  }
+
+  .el-menu {
+    @include container;
+
+    .el-submenu__title {
+      @include container;
+    }
+
+    .el-menu-item {
+      @include container;
+    }
+  }
+
+  .side-bar-container {
+    @include container;
+
+    .el-menu-item {
+      @include active;
+    }
+  }
+
+  .top-bar-container {
+    @include container;
+
+    .vab-main {
+      @include container;
+
+      .el-menu {
+        &--horizontal {
+          .el-submenu,
+          .el-menu-item {
+            &.is-active {
+              background-color: $base-menu-background-active !important;
+            }
+          }
+
+          > .el-menu-item {
+            &.is-active {
+              border-bottom: 3px solid $base-menu-background-active !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tags-bar-container {
+    background: $base-color-white;
+    border-top: 1px solid #f6f6f6;
+
+    .tags-content {
+      .el-tabs__header {
+        .el-tabs__item {
+          &.is-active {
+            background: $base-color-blue !important;
+            border: 1px solid $base-color-blue !important;
+          }
+        }
+      }
+    }
+  }
+
+  .theme-bar-setting {
+    background: $base-color-blue !important;
+  }
+}

src/styles/variables.scss

@@ -9,7 +9,7 @@ $base-color-default: #1890ff;
 //默认层级
 $base-z-index: 999;
 //横向布局纵向布局时菜单背景色
-$base-menu-background: #001529;
+$base-menu-background: rgb(40, 44, 52);
 //菜单文字颜色
 $base-menu-color: hsla(0, 0%, 100%, 0.95);
 //菜单选中文字颜色
@@ -57,10 +57,10 @@ $base-menu-item-height: 50px;
 //app-main的高度
 $base-app-main-height: calc(
   100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} - #{$base-padding} -
-  #{$base-padding} - 55px - 30px
+    #{$base-padding} - 55px - 30px
 );
 //纵向布局时左侧导航未折叠时的宽度
-$base-left-menu-width: 256px;
+$base-left-menu-width: 240px;
 //纵向布局时左侧导航未折叠时右侧内容的宽度
 $base-right-content-width: calc(100% - #{$base-left-menu-width});
 //纵向布局时左侧导航已折叠时的宽度