初始化拉取，原文件名：admin-plus-webpack5

library/styles/background/black.scss

@@ -0,0 +1,251 @@
+/**
+ * @description 黑
+ */
+
+body.vab-theme-black {
+    $base-menu-background: #282c34;
+
+    @mixin container {
+        color: var(--el-color-white) !important;
+        background: $base-menu-background !important;
+    }
+
+    @mixin active {
+        &:hover {
+            color: var(--el-color-white) !important;
+            background-color: var(--el-color-primary) !important;
+        }
+
+        &.is-active {
+            color: var(--el-color-white) !important;
+            background-color: var(--el-color-primary) !important;
+        }
+    }
+
+    .logo-container-vertical,
+    .logo-container-horizontal,
+    .logo-container-comprehensive,
+    .logo-container-float {
+        @include container;
+    }
+
+    .logo-container-column {
+        .logo {
+            @include container;
+        }
+    }
+
+    .vab-column-bar-container.el-scrollbar {
+        .el-tabs {
+            .el-tabs__nav-wrap.is-left {
+                @include container;
+            }
+
+            .el-tabs__nav {
+                @include container;
+            }
+
+            .el-tabs__item.is-active {
+                background: var(--el-color-primary) !important;
+            }
+        }
+
+        .el-menu {
+            .el-menu-item.is-active,
+            .el-sub-menu__title.is-active,
+            .el-menu-item:hover,
+            .el-sub-menu__title:hover {
+                i {
+                    color: var(--el-color-primary) !important;
+                }
+
+                color: var(--el-color-primary) !important;
+                background-color: var(--el-color-primary-light-9) !important;
+            }
+        }
+    }
+
+    .vab-column-bar-container-card.el-scrollbar {
+        .el-tabs {
+            .el-tabs__item.is-active {
+                background: transparent !important;
+
+                .vab-column-grid {
+                    background: var(--el-color-primary) !important;
+                }
+            }
+        }
+    }
+
+    .vab-column-bar-container-arrow.el-scrollbar {
+        .el-tabs {
+            .el-tabs__item.is-active {
+                background: transparent !important;
+
+                .vab-column-grid {
+                    background: transparent !important;
+                }
+            }
+        }
+    }
+
+    .vab-layout-float,
+    .vab-layout-common,
+    .vab-layout-vertical,
+    .vab-layout-horizontal,
+    .vab-layout-comprehensive {
+        .el-menu {
+            @include container;
+
+            .el-sub-menu .el-sub-menu__title,
+            .el-menu-item {
+                @include container;
+            }
+        }
+
+        .vab-side-bar,
+        .comprehensive-bar-container {
+            @include container;
+
+            .el-menu-item {
+                @include active;
+            }
+        }
+    }
+
+    .vab-layout-float {
+        .el-scrollbar__view
+            .el-menu--collapse.el-menu
+            li.el-sub-menu.is-active {
+            .el-sub-menu__title {
+                background-color: transparent !important;
+            }
+
+            > .el-sub-menu__title {
+                background-color: var(--el-color-primary) !important;
+            }
+        }
+    }
+
+    .vab-header {
+        @include container;
+
+        .vab-main {
+            @include container;
+
+            .right-panel {
+                .el-menu {
+                    &--horizontal {
+                        .el-sub-menu .el-sub-menu__title,
+                        .el-menu-item {
+                            @include active;
+                        }
+                    }
+                }
+                [role='menubar'].el-menu--horizontal {
+                    > .el-sub-menu.is-active[tabindex='0'] {
+                        > .el-sub-menu__title {
+                            color: var(--el-color-white) !important;
+                            background-color: var(
+                                --el-color-primary
+                            ) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .vab-tabs {
+        &-more {
+            &-active,
+            &:hover {
+                .vab-tabs-more-icon {
+                    .box:before,
+                    .box:after {
+                        background: var(--el-color-primary) !important;
+                    }
+                }
+            }
+        }
+
+        .vab-tabs-content-card {
+            .el-tabs__header {
+                .el-tabs__item {
+                    &.is-active {
+                        color: var(--el-color-primary) !important;
+                        background: var(--el-color-primary-light-9) !important;
+                        border: 1px solid var(--el-color-primary) !important;
+                    }
+
+                    &:hover {
+                        border: 1px solid var(--el-color-primary) !important;
+                    }
+                }
+            }
+        }
+
+        .vab-tabs-content-smart {
+            .el-tabs__header {
+                .el-tabs__item {
+                    &.is-active {
+                        background: var(--el-color-primary-light-9) !important;
+                    }
+
+                    &:after {
+                        background-color: var(--el-color-primary) !important;
+                    }
+
+                    &:hover {
+                        background: var(--el-color-primary-light-9) !important;
+                    }
+                }
+            }
+        }
+
+        .vab-tabs-content-smooth {
+            .el-tabs__header {
+                .el-tabs__item {
+                    &.is-active {
+                        color: var(--el-color-primary) !important;
+                        background: var(--el-color-primary-light-9) !important;
+
+                        &:hover {
+                            color: var(--el-color-primary) !important;
+                            background: var(
+                                --el-color-primary-light-9
+                            ) !important;
+                        }
+                    }
+
+                    &:hover {
+                        color: var(--el-color-black) !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .vab-nav {
+        .el-tabs__item.is-active,
+        .el-tabs__item:hover {
+            color: var(--el-color-primary) !important;
+        }
+
+        .el-tabs__active-bar {
+            background-color: var(--el-color-primary) !important;
+        }
+    }
+
+    #nprogress {
+        .bar {
+            background: var(--el-color-primary) !important;
+        }
+
+        .peg {
+            box-shadow:
+                0 0 10px var(--el-color-primary),
+                0 0 5px var(--el-color-primary) !important;
+        }
+    }
+}

library/styles/background/image.scss

@@ -0,0 +1,108 @@
+/**
+ * @description 菜单背景
+ */
+
+body.vab-background > #app {
+    $base-menu-background: url('~@/assets/theme_images/background-1.png')
+        no-repeat;
+
+    @mixin container {
+        color: $base-color-white !important;
+        background: $base-menu-background !important;
+        background-size: auto 100% !important;
+    }
+    @mixin transparent {
+        color: $base-color-white !important;
+        background: transparent !important;
+    }
+    @mixin active {
+        span {
+            color: $base-color-white !important;
+        }
+
+        &:hover {
+            color: $base-color-white !important;
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
+
+        &.is-active {
+            color: $base-color-white !important;
+            background-color: rgba(0, 0, 0, 0.3) !important;
+        }
+    }
+
+    .vab-side-bar:not(.is-collapse),
+    .comprehensive-bar-container {
+        @include container;
+
+        .el-menu {
+            @include transparent;
+
+            .el-menu-item,
+            .el-sub-menu__title {
+                @include transparent;
+                @include active;
+
+                i,
+                svg {
+                    @include transparent;
+                }
+            }
+        }
+
+        .logo-container-vertical,
+        .logo-container-comprehensive,
+        .logo-container-float {
+            @include transparent;
+
+            .logo .vab-icon,
+            .title {
+                @include transparent;
+            }
+        }
+    }
+
+    .vab-column-bar-container {
+        &.el-scrollbar {
+            .logo-container-column {
+                .logo {
+                    @include container;
+                    background: #034291 !important;
+
+                    .vab-icon {
+                        @include transparent;
+                    }
+                }
+            }
+
+            .el-tabs {
+                .el-tabs__nav-wrap.is-left {
+                    @include container;
+                }
+
+                .el-tabs__nav,
+                .el-tabs__item {
+                    @include transparent;
+
+                    &.is-active {
+                        color: $base-color-white !important;
+                        background-color: rgba(0, 0, 0, 0.3) !important;
+                    }
+                }
+            }
+
+            &.vab-column-bar-container-card {
+                .el-tabs {
+                    .el-tabs__item {
+                        &.is-active {
+                            background: transparent !important;
+                            .vab-column-grid {
+                                background-color: rgba(0, 0, 0, 0.3) !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

library/styles/background/ocean.scss

@@ -0,0 +1,181 @@
+/**
+ * @description 渐变
+ */
+
+body.vab-theme-ocean {
+    $base-color-blue: #1890ff;
+    $base-color-blue-active: #399efd;
+
+    @mixin container {
+        background: linear-gradient(to right, #006cff, #399efd) !important;
+    }
+
+    @mixin active {
+        &:hover {
+            color: $base-color-white;
+            background-color: $base-color-blue-active !important;
+        }
+
+        &.is-active {
+            color: $base-color-white;
+            background-color: $base-color-blue-active !important;
+        }
+    }
+
+    .logo-container-horizontal {
+        background: var(--el-color-primary) !important;
+    }
+
+    .logo-container-vertical,
+    .logo-container-comprehensive,
+    .logo-container-float {
+        @include container;
+    }
+
+    .logo-container-column {
+        .logo {
+            @include container;
+        }
+    }
+
+    .vab-column-bar-container {
+        .el-tabs {
+            .el-tabs__nav-wrap.is-left {
+                @include container;
+            }
+
+            .el-tabs__nav {
+                @include container;
+            }
+        }
+
+        .el-menu {
+            .el-menu-item.is-active,
+            .el-sub-menu__title.is-active,
+            .el-menu-item:hover,
+            .el-sub-menu__title:hover {
+                i {
+                    color: var(--el-color-primary) !important;
+                }
+
+                color: var(--el-color-primary) !important;
+                background-color: var(--el-color-primary-light-9) !important;
+            }
+        }
+
+        &-card {
+            .el-tabs {
+                .el-tabs__item {
+                    &.is-active {
+                        background: transparent !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .vab-layout-horizontal {
+        .vab-header {
+            background: var(--el-color-primary) !important;
+        }
+
+        .el-menu {
+            background: var(--el-color-primary) !important;
+
+            .el-sub-menu__title {
+                background: var(--el-color-primary) !important;
+            }
+
+            .el-menu-item {
+                background: var(--el-color-primary) !important;
+            }
+        }
+
+        .vab-side-bar,
+        .comprehensive-bar-container {
+            background: var(--el-color-primary) !important;
+
+            .el-menu-item {
+                @include active;
+            }
+        }
+    }
+
+    .vab-layout-vertical,
+    .vab-layout-comprehensive,
+    .vab-layout-common,
+    .vab-layout-float {
+        .vab-side-bar,
+        .comprehensive-bar-container {
+            @include container;
+
+            .el-menu {
+                @include container;
+                @include active;
+
+                .el-sub-menu__title,
+                .el-menu-item {
+                    background-color: transparent !important;
+                    @include active;
+
+                    &.is-active {
+                        background-color: $base-color-blue-active !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .vab-layout-float {
+        .el-scrollbar__view
+            .el-menu--collapse.el-menu
+            li.el-sub-menu.is-active {
+            .el-sub-menu__title {
+                background-color: transparent !important;
+            }
+
+            > .el-sub-menu__title {
+                background-color: var(--el-color-primary) !important;
+            }
+        }
+    }
+
+    .vab-header {
+        background-color: var(--el-color-primary) !important;
+
+        .vab-main {
+            .el-menu.el-menu {
+                background-color: var(--el-color-primary) !important;
+
+                &--horizontal {
+                    .el-sub-menu,
+                    .el-menu-item {
+                        background-color: var(--el-color-primary) !important;
+
+                        &.is-active {
+                            color: $base-color-white !important;
+                            background-color: $base-color-blue-active !important;
+                        }
+                    }
+
+                    > .el-menu-item,
+                    .el-sub-menu__title,
+                    > .el-menu-item:hover,
+                    > .el-sub-menu__title:hover {
+                        color: $base-color-white !important;
+                        background-color: var(--el-color-primary) !important;
+
+                        i {
+                            color: $base-color-white !important;
+                        }
+
+                        &.is-active {
+                            color: $base-color-white !important;
+                            background-color: $base-color-blue-active !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

library/styles/background/white.scss

@@ -0,0 +1,293 @@
+/**
+ * @description 白
+ */
+
+body.vab-theme-white {
+    $base-menu-background: #fff;
+
+    @mixin container {
+        color: #515a6e !important;
+        background: $base-menu-background !important;
+    }
+
+    @mixin active {
+        &:hover {
+            color: var(--el-color-primary) !important;
+            background-color: var(--el-color-primary-light-9) !important;
+
+            i,
+            svg,
+            span[title] {
+                color: var(--el-color-primary) !important;
+            }
+        }
+
+        &.is-active {
+            color: var(--el-color-primary) !important;
+            background-color: var(--el-color-primary-light-9) !important;
+
+            i,
+            svg,
+            span[title] {
+                color: var(--el-color-primary) !important;
+            }
+        }
+    }
+
+    .logo-container-common,
+    .logo-container-vertical,
+    .logo-container-horizontal,
+    .logo-container-comprehensive,
+    .logo-container-float {
+        @include container;
+
+        .title,
+        .vab-icon {
+            @include container;
+        }
+    }
+
+    .logo-container-column {
+        @include container;
+
+        .title {
+            @include container;
+        }
+
+        .logo,
+        .vab-icon {
+            @include container;
+        }
+    }
+
+    .vab-column-bar-container {
+        .el-tabs {
+            @include container;
+
+            .el-tabs__nav-wrap.is-left {
+                background: #f7faff !important;
+            }
+
+            .el-tabs__item,
+            .el-tabs__nav {
+                @include container;
+            }
+
+            .el-tabs__item.is-active {
+                color: var(--el-color-white) !important;
+                background: var(--el-color-primary) !important;
+            }
+        }
+
+        .el-menu {
+            .el-menu-item.is-active,
+            .el-sub-menu__title.is-active,
+            .el-menu-item:hover,
+            .el-sub-menu__title:hover {
+                i {
+                    color: var(--el-color-primary) !important;
+                }
+
+                color: var(--el-color-primary) !important;
+                background-color: var(--el-color-primary-light-9) !important;
+            }
+        }
+
+        &-card {
+            .el-tabs {
+                .el-tabs__item {
+                    &.is-active {
+                        background: transparent !important;
+                    }
+                }
+            }
+        }
+
+        &-arrow {
+            .el-tabs {
+                .el-tabs__item {
+                    &.is-active {
+                        color: var(--el-color-black) !important;
+                        background: transparent !important;
+
+                        .vab-column-grid {
+                            background: transparent !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .vab-layout-float,
+    .vab-layout-common,
+    .vab-layout-vertical,
+    .vab-layout-horizontal,
+    .vab-layout-comprehensive {
+        .el-menu {
+            @include container;
+
+            .el-sub-menu .el-sub-menu__title,
+            .el-menu-item {
+                @include container;
+            }
+
+            .el-menu-item.is-active,
+            .el-sub-menu__title.is-active,
+            .el-menu-item:hover,
+            .el-sub-menu__title:hover {
+                i {
+                    color: var(--el-color-primary) !important;
+                }
+
+                color: var(--el-color-primary) !important;
+                background-color: var(--el-color-primary-light-9) !important;
+            }
+        }
+
+        .vab-side-bar,
+        .comprehensive-bar-container {
+            @include container;
+
+            .el-menu-item {
+                @include active;
+            }
+        }
+    }
+
+    .vab-layout-float {
+        .el-scrollbar__view
+            .el-menu--collapse.el-menu
+            li.el-sub-menu.is-active {
+            .el-sub-menu__title {
+                background-color: transparent !important;
+            }
+
+            > .el-sub-menu__title {
+                color: var(--el-color-primary) !important;
+                background-color: var(--el-color-primary-light-9) !important;
+            }
+        }
+    }
+
+    .vab-header {
+        @include container;
+
+        .vab-main {
+            @include container;
+
+            .right-panel {
+                .user-name,
+                .user-name *,
+                > i,
+                > div > i,
+                > span > i,
+                > div > span > i,
+                > svg,
+                > div > svg,
+                > span > svg,
+                > div > span > svg,
+                .ri-notification-line,
+                .ri-translate,
+                .ri-bug-line {
+                    @include container;
+                }
+
+                .el-menu {
+                    &--horizontal {
+                        .el-sub-menu .el-sub-menu__title,
+                        .el-menu-item {
+                            @include active;
+                        }
+
+                        .el-sub-menu,
+                        .el-menu-item {
+                            &.is-active {
+                                @include active;
+                            }
+                        }
+
+                        > .el-sub-menu.is-active {
+                            > .el-sub-menu__title {
+                                background-color: var(
+                                    --el-color-primary-light-9
+                                ) !important;
+                                @include active;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .vab-tabs {
+        &-more {
+            &-active,
+            &:hover {
+                .vab-tabs-more-icon {
+                    .box:before,
+                    .box:after {
+                        background: var(--el-color-primary) !important;
+                    }
+                }
+            }
+        }
+
+        .vab-tabs-content-card {
+            .el-tabs__header {
+                .el-tabs__item {
+                    &.is-active {
+                        color: var(--el-color-primary) !important;
+                        background: var(--el-color-primary-light-9) !important;
+                        border: 1px solid var(--el-color-primary) !important;
+                    }
+
+                    &:hover {
+                        border: 1px solid var(--el-color-primary) !important;
+                    }
+                }
+            }
+        }
+
+        .vab-tabs-content-smart {
+            .el-tabs__header {
+                .el-tabs__item {
+                    &.is-active {
+                        background: var(--el-color-primary-light-9) !important;
+                    }
+
+                    &:after {
+                        background-color: var(--el-color-primary) !important;
+                    }
+
+                    &:hover {
+                        background: var(--el-color-primary-light-9) !important;
+                    }
+                }
+            }
+        }
+
+        .vab-tabs-content-smooth {
+            .el-tabs__header {
+                .el-tabs__item {
+                    &.is-active {
+                        color: var(--el-color-primary) !important;
+                        background: var(--el-color-primary-light-9) !important;
+
+                        &:hover {
+                            color: var(--el-color-primary) !important;
+                            background: var(
+                                --el-color-primary-light-9
+                            ) !important;
+                        }
+                    }
+
+                    &:hover {
+                        color: var(--el-color-black) !important;
+                    }
+                }
+            }
+        }
+    }
+}