fix(style): 修复黑暗模式下弹框、demo目录下、按钮样式问题 (#3208)

删除黑暗模式下冗余的样式代码

internal/vite-config/src/utils/modifyVars.ts

@@ -7,7 +7,6 @@ import { theme } from 'ant-design-vue/lib';
 import convertLegacyToken from 'ant-design-vue/lib/theme/convertLegacyToken';
 
 const { defaultAlgorithm, defaultSeed } = theme;
-
 const primaryColor = '#0960bd';
 
 function generateAntColors(color: string, theme: 'default' | 'dark' = 'default') {
@@ -22,17 +21,14 @@ function generateAntColors(color: string, theme: 'default' | 'dark' = 'default')
 export function generateModifyVars() {
   const palettes = generateAntColors(primaryColor);
   const primary = palettes[5];
-
   const primaryColorObj: Record<string, string> = {};
 
   for (let index = 0; index < 10; index++) {
     primaryColorObj[`primary-${index + 1}`] = palettes[index];
   }
-
   // const modifyVars = getThemeVariables();
   const mapToken = defaultAlgorithm(defaultSeed);
   const v3Token = convertLegacyToken(mapToken);
-
   return {
     ...v3Token,
     // reference:  Avoid repeated references
@@ -47,6 +43,5 @@ export function generateModifyVars() {
     'font-size-base': '14px', //  Main font size
     'border-radius-base': '2px', //  Component/float fillet
     'link-color': primary, //   Link color
-    'app-content-background': '#fafafa', //   Link color
   };
 }

src/components/Application/src/AppDarkModeToggle.vue

@@ -10,7 +10,14 @@
   import { SvgIcon } from '/@/components/Icon';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+  import {
+    updateTextColor,
+    updateBorderColor,
+    updateHeaderBgColor,
+    updateSidebarBgColor,
+    updateComponentBgColor,
+    updateAppContentBgColor,
+  } from '/@/logics/theme/updateBackground';
   import { updateDarkTheme } from '/@/logics/theme/dark';
   import { ThemeEnum } from '/@/enums/appEnum';
 
@@ -30,8 +37,12 @@
     const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
     setDarkMode(darkMode);
     updateDarkTheme(darkMode);
+    updateTextColor();
+    updateBorderColor();
     updateHeaderBgColor();
     updateSidebarBgColor();
+    updateComponentBgColor();
+    updateAppContentBgColor();
   }
 </script>
 <style lang="less" scoped>
@@ -61,7 +72,9 @@
       z-index: 1;
       width: 18px;
       height: 18px;
-      transition: transform 0.5s, background-color 0.5s;
+      transition:
+        transform 0.5s,
+        background-color 0.5s;
       border-radius: 50%;
       background-color: #fff;
       will-change: transform;

src/components/Modal/src/index.less

@@ -17,7 +17,7 @@
   }
 }
 
-.vben-basic-modal-wrap .ant-modal {
+.ant-modal {
   width: 520px;
   padding-bottom: 0;
 
@@ -52,20 +52,26 @@
 
   &-header {
     padding: 16px;
+    border-bottom: 1px solid @border-color-base;
   }
 
   &-content {
-    padding: 12px 8px !important;
+    padding: 0 !important;
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
   }
 
   &-footer {
+    padding: 10px 16px;
+    border-top: 1px solid @border-color-base;
+
     button + button {
       margin-left: 10px;
     }
   }
 
   &-close {
+    top: 0 !important;
+    right: 0 !important;
     width: auto !important;
     outline: none;
     background: transparent !important;
@@ -81,8 +87,6 @@
 
   &-confirm-body {
     .ant-modal-confirm-content {
-      // color: #fff;
-
       > * {
         color: @text-color-help-dark;
       }

src/design/ant/btn.less

@@ -32,13 +32,6 @@
       background-color: @button-cancel-hover-bg-color;
       color: @button-cancel-hover-color;
     }
-    //
-    //&[disabled],
-    //&[disabled]:hover {
-    //  color: fade(@button-cancel-color, 40%) !important;
-    //  background: fade(@button-cancel-bg-color, 40%) !important;
-    //  border-color: fade(@button-cancel-border-color, 40%) !important;
-    //}
   }
 
   [data-theme='light'] &.ant-btn-link.is-disabled {
@@ -85,6 +78,17 @@
     }
   }
 
+  &[disabled],
+  &[disabled]:hover {
+    //  color: fade(@button-cancel-color, 40%) !important;
+    //  background: fade(@button-cancel-bg-color, 40%) !important;
+    //  border-color: fade(@button-cancel-border-color, 40%) !important;
+    border-color: #d9d9d9;
+    background: #f5f5f5;
+    color: rgb(0 0 0 / 25%);
+    text-shadow: none;
+  }
+
   &-success:not(.ant-btn-link, .is-disabled) {
     border-color: @button-success-color;
     background-color: @button-success-color;

src/design/color.less

@@ -1,4 +1,10 @@
 html {
+  // text
+  --text-color: rgb(0 0 0 85%);
+
+  // border
+  --border-color: #eee;
+
   // header
   --header-bg-color: #394664;
   --header-bg-hover-color: #273352;
@@ -8,12 +14,24 @@ html {
   --sider-dark-bg-color: #273352;
   --sider-dark-darken-bg-color: #273352;
   --sider-dark-lighten-bg-color: #273352;
+
+  // component
+  --component-background-color: #fff;
+
+  // app
+  --app-content-background-color: #fafafa;
 }
 
 @white: #fff;
 
 @content-bg: #f4f7f9;
 
+@border-color-base: var(--border-color);
+
+@text-color-secondary: #8b949e;
+
+@component-background: var(--component-background-color);
+
 // :export {
 //   name: "less";
 //   mainColor: @mainColor;
@@ -50,7 +68,6 @@ html {
 // =================================
 // ==============Header=============
 // =================================
-
 @header-dark-bg-color: var(--header-bg-color);
 @header-dark-bg-hover-color: var(--header-bg-hover-color);
 @header-light-bg-hover-color: #f6f6f6;
@@ -91,7 +108,12 @@ html {
 // =================================
 
 // Main text color
-@text-color-base: @text-color;
+@text-color-base: var(--text-color);
+
+// =================================
+// ==============app content color-=============
+// =================================
+@app-content-background: var(--app-content-background-color);
 
 // Label color
 @text-color-call-out: #606266;

src/design/dark.less

@@ -1,1396 +1,110 @@
 [data-theme='dark'] {
-  @media (max-width: 1200px) {
-    background-color: #293146;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: rgb(0 0 0 / 5%);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: rgb(144 147 153 / 30%);
-    box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: #b6b7b9;
-  }
-
-  #nprogress .bar {
-    background-color: #0960bd;
-  }
-
-  .modal-icon-warning {
-    color: #efbd47 !important;
-  }
-
-  .modal-icon-success {
-    color: #55d187 !important;
-  }
-
-  .modal-icon-error {
-    color: #ed6f6f !important;
-  }
-
-  .modal-icon-info {
-    color: #0960bd !important;
-  }
-
-  .bg-white {
-    background-color: #151515 !important;
-  }
-
-  .text-secondary {
-    color: #8b949e;
-  }
-
-  :not(:root):fullscreen::backdrop {
-    background-color: #000 !important;
-  }
-
-  html {
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-  }
-
   body {
     background-color: #000;
-    color: #c9d1d9;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: rgb(255 255 255 / 65%);
-  }
-
-  a {
-    background-color: transparent;
-    color: #0960bd;
-  }
-
-  a:hover {
-    color: #0960bd;
-  }
-
-  a:active {
-    color: #0960bd;
-  }
-
-  a[disabled] {
-    color: rgb(255 255 255 / 30%);
-  }
-
-  caption {
-    color: #8b949e;
-  }
-
-  mark {
-    background-color: #2c2712;
-  }
-
-  ::selection {
-    background: #0960bd;
-    color: #fff;
+    color: @text-color-base;
   }
 
   .ant-btn {
-    border: 1px solid transparent;
-    border-color: #303030;
-    background: transparent;
-    box-shadow: 0 2px 0 rgb(0 0 0 / 1.5%);
-    color: #c9d1d9;
-  }
-
-  .ant-btn-primary:hover,
-  .ant-btn-primary:focus {
-    border-color: #004496;
-    background: #004496;
-    color: #fff;
-  }
-
-  .ant-btn-primary {
-    border-color: #0960bd;
-    background: #0960bd;
-    box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
-    color: #fff;
-  }
-
-  .ant-btn-primary:not(.ant-btn-background-ghost):not([disabled]) {
-    color: #fff;
-  }
-
-  .ant-btn-dangerous.ant-btn-primary:hover,
-  .ant-btn-dangerous.ant-btn-primary:focus {
-    border-color: #c75457;
-    background: #c75457;
-    color: #fff;
-  }
-
-  .ant-btn-dangerous.ant-btn-primary {
-    border-color: #ed6f6f;
-    background: #ed6f6f;
-    box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
-    color: #fff;
-  }
-
-  .ant-btn-dangerous:hover,
-  .ant-btn-dangerous:focus {
-    border-color: #c75457;
-    background: transparent;
-    color: #c75457;
-  }
-
-  .ant-btn-error:not(.ant-btn-link, .is-disabled):hover,
-  .ant-btn-error:not(.ant-btn-link, .is-disabled):focus {
-    border-color: #f39c9c;
-    background-color: #f39c9c;
-    color: #fff;
-  }
-
-  .ant-btn-error:not(.ant-btn-link, .is-disabled) {
-    border-color: #ed6f6f;
-    background-color: #ed6f6f;
-    color: #fff;
-  }
-
-  .ant-btn-link {
-    border-color: transparent;
-    background: transparent;
-    color: #0960bd;
-  }
-
-  .ant-btn-link:hover {
-    background: transparent;
-  }
-
-  html .vben-login {
-    background-color: #293146;
-  }
-
-  html .vben-login .ant-input,
-  html .vben-login .ant-input-password {
-    background-color: #232a3b;
-  }
-
-  html .vben-login .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
-    border: 1px solid #4a5569;
-  }
-
-  html .vben-login-form {
-    background: 0 0 !important;
-  }
-
-  html .vben-login .app-iconify {
-    color: #fff;
-  }
-
-  html .fix-auto-fill input,
-  html input.fix-auto-fill {
-    -webkit-text-fill-color: #c9d1d9 !important;
-  }
-
-  .vben-login .vben-login-form {
-    background-color: #fff;
-  }
-
-  .vben-login .vben-app-logo__title {
-    color: #fff;
-  }
-
-  .vben-login .container .vben-app-logo__title {
-    color: #fff;
-  }
-
-  .vben-login-sign-in-way .anticon {
-    color: #888;
-  }
-
-  .vben-login-sign-in-way .anticon:hover {
-    color: #0960bd;
-  }
-
-  .vben-login .ant-divider-inner-text {
-    color: #8b949e;
-  }
-
-  .vben-app-logo.light {
-    border-bottom: 1px solid #303030;
-  }
-
-  .vben-app-logo.light .vben-app-logo__title {
-    color: #0960bd;
-  }
-
-  .vben-app-logo.dark .vben-app-logo__title {
-    color: #fff;
-  }
-
-  html .vben-dark-switch {
-    border: 1px solid #c4bcbc;
-  }
-
-  .vben-dark-switch {
-    background-color: #151515;
-  }
-
-  .vben-dark-switch-inner {
-    background-color: #fff;
-  }
-
-  .scroll-wrap {
-    background-color: #151515;
-  }
-
-  .virtual-scroll-demo-wrap {
-    background-color: #151515;
-  }
-
-  .virtual-scroll-demo__item {
-    border-bottom: 1px solid #303030;
-  }
-
-  .lazy-base-demo-wrap {
-    background-color: #151515;
-  }
-
-  .demo-wrap {
-    background-color: #151515;
-  }
-
-  .form-wrap {
-    background-color: #151515;
-  }
-
-  .full-loading {
-    background-color: rgb(240 242 245 / 40%);
-  }
-
-  html .full-loading:not(.light) {
-    background-color: rgb(0 0 0 / 45%);
-  }
-
-  .full-loading.dark {
-    background-color: rgb(0 0 0 / 45%);
-  }
-
-  .step-form-content {
-    background-color: #151515;
-  }
-
-  .desc-wrap {
-    background-color: #151515 !important;
-  }
-
-  .result-success {
-    background-color: #151515;
-  }
-
-  .result-success__content {
-    background-color: rgb(255 255 255 / 4%);
-  }
-
-  .result-error {
-    background-color: #151515;
-  }
-
-  .result-error__content {
-    background-color: rgb(255 255 255 / 4%);
-  }
-
-  .result-error__content-icon {
-    color: #ff4d4f;
-  }
-
-  .account-center-col:not(:last-child):not(:last-child) {
-    border-right: 1px dashed rgb(206 206 206 / 50%);
-  }
-
-  .account-center-top {
-    background-color: #151515;
-  }
-
-  .account-center-bottom {
-    background-color: #151515;
-  }
-
-  .account-setting {
-    background-color: #151515;
-  }
-
-  .account-setting .ant-tabs-tab-active {
-    background-color: #111b26;
-  }
-
-  .list-card__card-title {
-    color: #c9d1d9;
-  }
-
-  .list-card__card-detail {
-    color: #8b949e;
-  }
-
-  .demo {
-    background-color: #151515;
-  }
-
-  .list-basic__top {
-    background-color: #151515;
-  }
-
-  .list-basic__top-col:not(:last-child) {
-    border-right: 1px dashed #303030;
-  }
-
-  .list-basic__top-col div {
-    color: #c9d1d9;
-  }
-
-  .list-basic__top-col p {
-    color: #c9d1d9;
-  }
-
-  .list-basic__content {
-    background-color: #151515;
-  }
-
-  .list-basic__content .extra {
-    color: #0960bd;
-  }
-
-  .list-search__container {
-    background-color: #151515;
-  }
-
-  .list-search__content {
-    color: #8b949e;
-  }
-
-  .list-search__action-item {
-    color: #8b949e;
-  }
-
-  .list-search__action-item:first-child,
-  .list-search__action-item:nth-child(2) {
-    border-right: 1px solid #303030;
-  }
-
-  .list-search__time {
-    color: rgb(0 0 0 / 45%);
-  }
-
-  span.iconify {
-    background-color: #555;
-  }
-
-  .vben-default-layout {
-    background-color: #f4f7f9;
-  }
-
-  .vben-basic-table-header-cell__help {
-    color: rgb(0 0 0 / 65%) !important;
-  }
-
-  .step1 h3 {
-    color: #c9d1d9;
-  }
-
-  .step1 h4 {
-    color: #c9d1d9;
-  }
-
-  .step1 p {
-    color: #c9d1d9;
-  }
-
-  .vben-app-search-modal {
-    background-color: rgb(0 0 0 / 25%);
-  }
-
-  .vben-app-search-modal-content {
-    background-color: #151515;
-  }
-
-  .vben-app-search-modal-input {
-    color: #1c1e21;
-  }
-
-  .vben-app-search-modal-input span[role='img'] {
-    color: #999;
-  }
-
-  .vben-app-search-modal-cancel {
-    color: #666;
-  }
-
-  .vben-app-search-modal-not-data {
-    color: #969faf;
-  }
-
-  .vben-app-search-modal-list__item {
-    background-color: #151515;
-    box-shadow: 0 1px 3px 0 #d4d9e1;
-    color: #c9d1d9;
-  }
-
-  .vben-app-search-modal-list__item--active {
-    background-color: #0960bd;
-    color: #fff;
-  }
-
-  .account-center-application__card-num {
-    color: #8b949e;
-  }
-
-  .account-center-application__card-download {
-    color: #0960bd;
-  }
-
-  .vben-form-design-sider {
-    background-color: #fff;
-  }
-
-  .vben-st-login {
-    background: #151515;
-  }
-
-  .vben-iframe-page__main {
-    background-color: #151515;
-  }
-
-  .vben-lock-page__hour,
-  .vben-lock-page__minute {
-    background-color: #141313;
-    color: #bababa;
-  }
-
-  .vben-lock-page-entry {
-    background-color: rgb(0 0 0 / 50%);
-  }
-
-  .vben-lock-page-entry__header-name {
-    color: #bababa;
-  }
-
-  .vben-lock-page-entry__err-msg {
-    color: #ed6f6f;
-  }
-
-  .hidden-item {
-    background-color: #f0bfc3;
-  }
-
-  .draggable-box :deep(.list-main) .moving::before {
-    background-color: #0960bd;
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box:hover {
-    background-color: rgb(9 96 189 / 20%);
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box::before {
-    background-color: #0960bd;
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box.active {
-    background-color: rgb(9 96 189 / 20%);
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box .show-key-box {
-    color: #0960bd;
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box .copy,
-  .draggable-box :deep(.list-main) .drag-move-box .delete {
-    color: #fff;
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box .copy {
-    background-color: #0960bd;
-  }
-
-  .draggable-box :deep(.list-main) .drag-move-box .delete {
-    background-color: #0960bd;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box {
-    background-color: rgb(152 103 247 / 12%);
-  }
-
-  .draggable-box :deep(.list-main) .grid-box .grid-row {
-    background-color: rgb(152 103 247 / 12%);
-  }
-
-  .draggable-box :deep(.list-main) .grid-box .grid-row .grid-col .draggable-box {
-    border: 1px #ccc;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box .grid-row .grid-col .draggable-box .list-main {
-    border: 1px #ccc;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box::before {
-    background: 0 0;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box.active {
-    background-color: rgb(152 103 247 / 24%);
-  }
-
-  .draggable-box :deep(.list-main) .grid-box.active::before {
-    background-color: #9867f7;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .copy,
-  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .delete {
-    color: #fff;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .copy {
-    background-color: #9867f7;
-  }
-
-  .draggable-box :deep(.list-main) .grid-box > .copy-delete-box > .delete {
-    background-color: #9867f7;
-  }
-
-  .form-panel .empty-text {
-    color: #aaa;
-  }
-
-  .operating-area {
-    border-bottom: 2px solid #ccc;
-  }
-
-  .operating-area a {
-    color: #666;
-  }
-
-  .operating-area a.disabled,
-  .operating-area a.disabled:hover {
-    color: #ccc;
-  }
-
-  .operating-area a:hover {
-    color: #0960bd;
-  }
-
-  .vben-layout-header {
-    background-color: #fff;
-    color: #fff;
-  }
-
-  .vben-layout-header-left .vben-layout-header-trigger.light:hover {
-    background-color: #f6f6f6;
-  }
-
-  .vben-layout-header-left .vben-layout-header-trigger.light svg {
-    fill: #000;
-  }
-
-  .vben-layout-header--light {
-    border-bottom: 1px solid #eee;
-    border-left: 1px solid #eee;
-    background-color: #fff !important;
-  }
-
-  .vben-layout-header--light .vben-layout-header-logo {
-    color: #c9d1d9;
-  }
-
-  .vben-layout-header--light .vben-layout-header-logo:hover {
-    background-color: #f6f6f6;
-  }
-
-  .vben-layout-header--light .vben-layout-header-action__item {
-    color: #c9d1d9;
-  }
-
-  .vben-layout-header--light .vben-layout-header-action__item:hover {
-    background-color: #f6f6f6;
-  }
-
-  .vben-layout-header--light .vben-layout-header-action span[role='img'],
-  .vben-layout-header--light .vben-layout-header-action-icon {
-    color: #c9d1d9;
-  }
-
-  .vben-layout-header--dark {
-    border-top: 1px solid #303030;
-    border-left: 1px solid #303030;
-  }
-
-  .vben-layout-header--dark .vben-layout-header-action__item .ant-badge span {
-    color: #fff;
-  }
-
-  .vben-setting-drawer-feature {
-    background-color: #0960bd;
-    color: #fff;
-  }
-
-  .vben-layout-footer {
-    color: #d9d9d9;
-  }
-
-  .vben-layout-footer__links a {
-    color: #d9d9d9;
-  }
-
-  .vben-layout-footer__links a:hover {
-    color: rgb(0 0 0 / 85%);
-  }
-
-  .vben-layout-footer__github:hover {
-    color: rgb(0 0 0 / 85%);
-  }
-
-  .vben-page-footer {
-    border-top: 1px solid #303030;
-    background-color: #151515;
-  }
-
-  .vben-collapse-container {
-    background-color: #151515;
-  }
-
-  .vben-collapse-container__header {
-    border-bottom: 1px solid #303030;
-  }
-
-  .vben-collapse-container__footer {
-    border-top: 1px solid #303030;
-  }
-
-  .vben-page-wrapper-content-bg {
-    background-color: #151515;
-  }
-
-  .vben-basic-help {
-    color: #909399;
-  }
-
-  .vben-basic-help:hover {
-    color: #0960bd;
-  }
-
-  .vben-basic-title {
-    color: #c9d1d9 !important;
-  }
-
-  .vben-basic-title-show-span::before {
-    background-color: #0960bd;
-  }
-
-  .vben-cropper-avatar-image-wrapper {
-    border: 1px solid #303030;
-    background: #151515;
-  }
-
-  .vben-cropper-avatar-image-mask {
-    background: rgb(0 0 0 / 40%);
-  }
-
-  .vben-basic-table-row__striped td {
-    background-color: #1e1e1e;
-  }
-
-  .vben-basic-table-form-container .ant-form {
-    background-color: #151515;
-  }
-
-  .vben-basic-table .ant-table-wrapper {
-    background-color: #151515;
-  }
-
-  .vben-tree {
-    background-color: #151515;
-  }
-
-  .vben-tree-header {
-    border-bottom: 1px solid #303030;
-  }
-
-  .darg-verify {
-    border: 1px solid #ddd;
-    background-color: #eee;
-  }
-
-  .darg-verify-bar {
-    background-color: #55d187;
-  }
-
-  .darg-verify-content.success {
-    -webkit-text-fill-color: #fff;
-  }
-
-  .darg-verify-content > * {
-    -webkit-text-fill-color: #333;
-  }
-
-  .darg-verify-action {
-    background-color: #fff;
-  }
-
-  .ir-dv-img__tip {
-    color: #fff;
-  }
-
-  .ir-dv-img__tip.success {
-    background-color: rgb(85 209 135 / 60%);
-  }
-
-  .ir-dv-img__tip.error {
-    background-color: rgb(237 111 111 / 60%);
-  }
-
-  .ir-dv-img__tip.normal {
-    background-color: rgb(0 0 0 / 30%);
-  }
-
-  .vben-basic-drawer .ant-drawer-close:hover {
-    color: #ed6f6f;
-  }
-
-  .vben-basic-drawer .ant-drawer-body {
-    background-color: #151515;
-  }
-
-  .vben-basic-drawer__detail .ant-drawer-header {
-    border-top: 1px solid #303030;
-  }
-
-  .vben-strength-meter-bar {
-    background-color: rgb(255 255 255 / 30%);
-  }
-
-  .vben-strength-meter-bar::after,
-  .vben-strength-meter-bar::before {
-    border-color: #fff;
-    background-color: transparent;
-  }
-
-  .vben-strength-meter-bar--fill {
-    background-color: transparent;
-  }
-
-  .vben-strength-meter-bar--fill[data-score='0'] {
-    background-color: #e74242;
-  }
-
-  .vben-strength-meter-bar--fill[data-score='1'] {
-    background-color: #ed6f6f;
-  }
-
-  .vben-strength-meter-bar--fill[data-score='2'] {
-    background-color: #efbd47;
-  }
-
-  .vben-strength-meter-bar--fill[data-score='3'] {
-    background-color: rgb(85 209 135 / 50%);
-  }
-
-  .vben-strength-meter-bar--fill[data-score='4'] {
-    background-color: #55d187;
-  }
-
-  .vben-image-preview .ant-image-preview-operations {
-    background-color: rgb(0 0 0 / 40%);
-  }
-
-  .vben-app-search-footer {
-    border-top: 1px solid #303030;
-    background-color: #151515;
-    color: #666;
-  }
-
-  .vben-multiple-tabs {
-    border-bottom: 1px solid #303030;
-    background-color: #151515;
-  }
-
-  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav {
-    background-color: #151515;
-  }
-
-  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab {
-    background-color: #151515;
-    color: #c9d1d9;
-  }
-
-  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab svg {
-    fill: #c9d1d9;
-  }
-
-  .vben-multiple-tabs
-    .ant-tabs.ant-tabs-card
-    .ant-tabs-nav
-    .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
-    color: #0960bd;
-  }
-
-  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active {
-    background: #0960bd;
-  }
-
-  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active span {
-    color: #fff !important;
-  }
-
-  .vben-multiple-tabs .ant-tabs.ant-tabs-card .ant-tabs-nav .ant-tabs-tab-active svg {
-    fill: #fff;
-  }
-
-  .vben-multiple-tabs-content__extra-fold,
-  .vben-multiple-tabs-content__extra-quick,
-  .vben-multiple-tabs-content__extra-redo {
-    border-left: 1px solid #303030;
-    color: #8b949e;
-  }
-
-  .vben-multiple-tabs-content__extra-fold:hover,
-  .vben-multiple-tabs-content__extra-quick:hover,
-  .vben-multiple-tabs-content__extra-redo:hover {
-    color: #c9d1d9;
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-logo {
-    border-bottom: 1px solid #eee;
-  }
-
-  .vben-layout-mix-sider.light.open > .scrollbar {
-    border-right: 1px solid #eee;
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-module__item {
-    color: rgb(0 0 0 / 65%);
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-module__item--active {
-    color: #0960bd;
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__content {
-    box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__title .pushpin {
-    color: rgb(0 0 0 / 35%);
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-menu-list__title .pushpin:hover {
-    color: rgb(0 0 0 / 85%);
-  }
-
-  .vben-layout-mix-sider.dark .vben-layout-mix-sider-menu-list__title {
-    color: #fff;
-  }
-
-  .vben-layout-mix-sider-module__item {
-    color: rgb(255 255 255 / 65%);
-  }
-
-  .vben-layout-mix-sider-module__item:hover {
-    color: #fff;
-  }
-
-  .vben-layout-mix-sider-module__item--active {
-    color: #fff;
-  }
-
-  .vben-layout-mix-sider-module__item--active::before {
-    background-color: #0960bd;
-  }
-
-  .vben-layout-mix-sider-trigger {
-    background-color: rgb(255 255 255 / 10%);
-    color: rgb(255 255 255 / 65%);
-  }
-
-  .vben-layout-mix-sider.light .vben-layout-mix-sider-trigger {
-    border-top: 1px solid #eee;
-    background-color: #fff;
-    color: rgb(0 0 0 / 65%);
-  }
-
-  .vben-layout-mix-sider-menu-list {
-    background-color: #fff;
-  }
-
-  .vben-layout-mix-sider-menu-list__title {
-    border-bottom: 1px solid #eee;
-    color: #0960bd;
-  }
-
-  .vben-layout-mix-sider-menu-list__title .pushpin {
-    color: rgb(255 255 255 / 65%);
-  }
-
-  .vben-layout-mix-sider-menu-list__title .pushpin:hover {
-    color: #fff;
-  }
-
-  .vben-layout-mix-sider-menu-list__content .ant-menu-inline,
-  .vben-layout-mix-sider-menu-list__content .ant-menu-vertical,
-  .vben-layout-mix-sider-menu-list__content .ant-menu-vertical-left {
-    border-right: 1px solid transparent;
-  }
-
-  .vben-layout-mix-sider-drag-bar {
-    background-color: #f8f8f9;
-    box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
-  }
-
-  .vben-layout-sideBar.ant-layout-sider-dark .ant-layout-sider-trigger {
-    background-color: rgb(255 255 255 / 10%);
-    color: #bfbfbf;
-  }
-
-  .vben-layout-sideBar.ant-layout-sider-dark .ant-layout-sider-trigger:hover {
-    background-color: rgb(255 255 255 / 20%);
-    color: #fff;
-  }
-
-  .vben-layout-sideBar:not(.ant-layout-sider-dark) .ant-layout-sider-trigger {
-    border-top: 1px solid #303030;
-    color: #c9d1d9;
-  }
-
-  .vben-cropper-am-cropper {
-    background: #eee;
-  }
-
-  .vben-cropper-am-preview {
-    border: 1px solid #303030;
-  }
-
-  .vben-cropper-am-group {
-    border-top: 1px solid #303030;
-  }
-
-  .vben-basic-drawer-footer {
-    border-top: 1px solid #303030;
-    background-color: #151515;
-  }
-
-  .vben-basic-drawer-header__back:hover {
-    color: #0960bd;
-  }
-
-  .vben-basic-modal-close span:first-child:hover {
-    color: #0960bd;
-  }
-
-  .vben-basic-modal-close span:last-child:hover {
-    color: #ed6f6f;
-  }
-
-  html .lf-dnd {
-    background: #080808;
-  }
-
-  .vben-flow-chart-toolbar {
-    border-bottom: 1px solid #303030;
-    background-color: #1e1e1e;
-  }
-
-  .vben-flow-chart-toolbar .disabeld {
-    color: rgb(255 255 255 / 30%);
-  }
-
-  .vben-flow-chart-toolbar__icon:hover {
-    color: #0960bd;
-  }
-
-  .img-preview {
-    background: rgb(0 0 0 / 50%);
-  }
-
-  .img-preview-content {
-    color: #fff;
-  }
-
-  .img-preview__close {
-    background-color: rgb(0 0 0 / 50%);
-    color: #fff;
-  }
-
-  .img-preview__close:hover {
-    background-color: rgb(0 0 0 / 80%);
-  }
-
-  .img-preview__index {
-    background: rgb(109 109 109 / 60%);
-  }
-
-  .img-preview__controller {
-    background: rgb(109 109 109 / 60%);
-  }
-
-  .img-preview__arrow {
-    background-color: rgb(0 0 0 / 50%);
-  }
-
-  .img-preview__arrow:hover {
-    background-color: rgb(0 0 0 / 80%);
-  }
-
-  .vben-darg-bar:hover {
-    background-color: #0960bd;
-    box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
-  }
-
-  .vben-header-user-dropdown--light:hover {
-    background-color: #f6f6f6;
-  }
-
-  .vben-header-user-dropdown--light .vben-header-user-dropdown__name {
-    color: #c9d1d9;
-  }
-
-  .vben-header-user-dropdown--light .vben-header-user-dropdown__desc {
-    color: #7c8087;
-  }
-
-  .vben-layout-breadcrumb--light .ant-breadcrumb-link {
-    color: #999;
-  }
-
-  .vben-layout-breadcrumb--light .ant-breadcrumb-link a {
-    color: rgb(0 0 0 / 65%);
-  }
-
-  .vben-layout-breadcrumb--light .ant-breadcrumb-link a:hover {
-    color: #0960bd;
-  }
-
-  .vben-layout-breadcrumb--light .ant-breadcrumb-separator {
-    color: #999;
-  }
-
-  .vben-layout-breadcrumb--dark .ant-breadcrumb-link {
-    color: rgb(255 255 255 / 60%);
-  }
-
-  .vben-layout-breadcrumb--dark .ant-breadcrumb-link a {
-    color: rgb(255 255 255 / 80%);
-  }
-
-  .vben-layout-breadcrumb--dark .ant-breadcrumb-link a:hover {
-    color: #fff;
-  }
-
-  .vben-layout-breadcrumb--dark .ant-breadcrumb-separator,
-  .vben-layout-breadcrumb--dark .anticon {
-    color: rgb(255 255 255 / 80%);
-  }
-
-  .file-table thead {
-    background-color: rgb(255 255 255 / 4%);
-  }
-
-  .file-table table,
-  .file-table td,
-  .file-table th {
-    border: 1px solid #303030;
-  }
-
-  .context-menu {
-    border: 1px solid rgb(0 0 0 / 8%);
-    background-color: #151515;
-    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
-      0 1px 5px 0 rgb(0 0 0 / 6%);
-  }
-
-  .vben-simple-menu-tag {
-    color: #fff;
-  }
-
-  .vben-simple-menu-tag--primary {
-    background-color: #0960bd;
-  }
-
-  .vben-simple-menu-tag--error {
-    background-color: #ed6f6f;
-  }
-
-  .vben-simple-menu-tag--success {
-    background-color: #55d187;
-  }
-
-  .vben-simple-menu-tag--warn {
-    background-color: #efbd47;
-  }
-
-  .vben-editable-cell__icon:hover svg {
-    color: #0960bd;
-  }
-
-  .vben-setting-theme-picker__item {
-    border: 1px solid #ddd;
-  }
-
-  .vben-setting-theme-picker__item--active {
-    border: 1px solid #0b79ee;
-  }
-
-  .vben-setting-theme-picker__item--active svg {
-    fill: #fff !important;
-  }
-
-  .light-border::after {
-    background-color: #0960bd;
-  }
-
-  .vben-menu-menu-popover .vben-menu-item,
-  .vben-menu-menu-popover .vben-menu-submenu-title {
-    color: rgb(255 255 255 / 70%);
-  }
-
-  .vben-menu-menu-popover .vben-menu-dark .vben-menu-item,
-  .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title {
-    color: rgb(255 255 255 / 70%);
-  }
-
-  .vben-menu-menu-popover .vben-menu-dark .vben-menu-item:hover,
-  .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title:hover {
-    color: #fff;
-  }
-
-  .vben-menu-menu-popover .vben-menu-dark .vben-menu-item-selected,
-  .vben-menu-menu-popover .vben-menu-dark .vben-menu-submenu-title-selected {
-    background-color: #0960bd !important;
-    color: #fff;
-  }
-
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-item,
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title {
-    color: #c9d1d9;
-  }
-
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-item:hover,
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title:hover {
-    color: #0960bd;
-  }
-
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-item-selected,
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title-selected {
-    background-color: rgb(9 96 189 / 10%);
-    color: #0960bd;
-  }
-
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-item-selected::after,
-  .vben-menu-menu-popover .vben-menu-light .vben-menu-submenu-title-selected::after {
-    background-color: #0960bd;
-  }
-
-  .vben-menu {
-    color: #c9d1d9;
-  }
-
-  .vben-menu-light {
-    background-color: #fff;
-  }
-
-  .vben-menu-light .vben-menu-submenu-active {
-    color: #0960bd !important;
-  }
-
-  .vben-menu-light .vben-menu-submenu-active-border::after {
-    background-color: #0960bd;
-  }
-
-  .vben-menu-dark .vben-menu-submenu-active {
-    color: #fff !important;
-  }
-
-  .vben-menu-vertical .vben-menu-item:hover,
-  .vben-menu-vertical .vben-menu-submenu-title:hover {
-    color: #0960bd;
-  }
-
-  .vben-menu-light.vben-menu-vertical .vben-menu-item-active:not(.vben-menu-submenu) {
-    background-color: rgb(9 96 189 / 10%);
-    color: #0960bd;
-  }
-
-  .vben-menu-light.vben-menu-vertical .vben-menu-item-active:not(.vben-menu-submenu)::after {
-    background-color: #0960bd;
-  }
-
-  .vben-menu-light.vben-menu-vertical .vben-menu-item-active.vben-menu-submenu {
-    color: #0960bd;
-  }
-
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active,
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active {
-    background-color: rgb(9 96 189 / 5%);
-  }
-
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active::before,
-  .vben-menu-light.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active::before {
-    background-color: #0960bd;
-  }
-
-  .vben-menu-dark.vben-menu-vertical .vben-menu-item,
-  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title {
-    color: rgb(255 255 255 / 70%);
-  }
-
-  .vben-menu-dark.vben-menu-vertical .vben-menu-item-active:not(.vben-menu-submenu),
-  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title-active:not(.vben-menu-submenu) {
-    background-color: #0960bd !important;
-    color: #fff !important;
-  }
-
-  .vben-menu-dark.vben-menu-vertical .vben-menu-item:hover,
-  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title:hover {
-    color: #fff;
-  }
-
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active,
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active {
-    color: #fff !important;
-  }
-
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse .vben-menu-submenu-active::before,
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse > li.vben-menu-item-active::before {
-    background-color: #0960bd;
-  }
-
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-    .vben-menu-submenu-active
-    .vben-menu-submenu-collapse,
-  .vben-menu-dark.vben-menu-vertical.vben-menu-collapse
-    > li.vben-menu-item-active
-    .vben-menu-submenu-collapse {
-    background-color: transparent;
-  }
-
-  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu .vben-menu-item-active,
-  .vben-menu-dark.vben-menu-vertical .vben-menu-submenu .vben-menu-item-active:hover {
-    color: #fff;
-  }
-
-  .vben-menu-dark.vben-menu-vertical .vben-menu-child-item-active > .vben-menu-submenu-title {
-    color: #fff;
-  }
-
-  .vben-menu-dark.vben-menu-vertical
-    .vben-menu-opened
-    .vben-menu-submenu-has-parent-submenu
-    .vben-menu-submenu-title {
-    background-color: transparent;
-  }
-
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark {
-    background-color: transparent;
-  }
-
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item-active,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item-open,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item-selected,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-item:hover,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-active,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-open,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-selected,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu-title:hover,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .ant-menu-submenu:hover,
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark
-    .ant-menu:not(.ant-menu-inline)
-    .ant-menu-submenu-open {
-    color: #fff;
-  }
-
-  .vben-basic-menu__sidebar-hor.ant-menu-horizontal.ant-menu-dark .vben-basic-menu-item__level1 {
-    background-color: transparent;
-  }
-
-  .vben-setting-menu-type-picker__item {
-    background-color: #f0f2f5;
-  }
-
-  .vben-setting-menu-type-picker__item--light::before,
-  .vben-setting-menu-type-picker__item--sidebar::before {
-    background-color: #273352;
-  }
-
-  .vben-setting-menu-type-picker__item--light::after,
-  .vben-setting-menu-type-picker__item--sidebar::after {
-    background-color: #fff;
-  }
-
-  .vben-setting-menu-type-picker__item--mix::before {
-    background-color: #fff;
-  }
-
-  .vben-setting-menu-type-picker__item--mix::after {
-    background-color: #273352;
-  }
-
-  .vben-setting-menu-type-picker__item--top-menu::after {
-    background-color: #273352;
-  }
-
-  .vben-setting-menu-type-picker__item--dark {
-    background-color: #273352;
-  }
-
-  .vben-setting-menu-type-picker__item--mix-sidebar::before {
-    background-color: #273352;
-  }
-
-  .vben-setting-menu-type-picker__item--mix-sidebar::after {
-    background-color: #fff;
-  }
-
-  .vben-setting-menu-type-picker__item--mix-sidebar .mix-sidebar {
-    background-color: #fff;
-  }
-
-  .vben-setting-menu-type-picker__item--active,
-  .vben-setting-menu-type-picker__item:hover {
-    border: 2px solid #0960bd;
-  }
-
-  .vben-basic-column-setting__check-item .ant-checkbox-wrapper:hover {
-    color: #0960bd;
-  }
-
-  .vben-basic-column-setting__fixed-left,
-  .vben-basic-column-setting__fixed-right {
-    color: rgb(0 0 0 / 45%);
-  }
-
-  .vben-basic-column-setting__fixed-left.active,
-  .vben-basic-column-setting__fixed-left:hover,
-  .vben-basic-column-setting__fixed-right.active,
-  .vben-basic-column-setting__fixed-right:hover {
-    color: #0960bd;
-  }
-
-  .vben-basic-column-setting__fixed-left.disabled,
-  .vben-basic-column-setting__fixed-right.disabled {
-    color: rgb(255 255 255 / 30%);
-  }
-
-  .ant-card-grid-hoverable:hover {
-    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%),
-      0 9px 28px 8px rgb(0 0 0 / 20%);
-  }
-
-  .ant-card-grid {
-    box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset,
-      0 1px 0 0 #434343 inset;
-  }
-
-  .ant-calendar-selected-day .ant-calendar-date {
-    color: rgb(0 0 0 / 80%);
-  }
-
-  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
-    color: rgb(0 0 0 / 90%);
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &[disabled]:active {
+      border-color: #303030;
+      background: rgb(255 255 255 / 8%);
+      color: rgb(255 255 255 / 30%);
+    }
+
+    &-success.ant-btn-link.ant-btn-loading,
+    &-warning.ant-btn-link.ant-btn-loading,
+    &-error.ant-btn-link.ant-btn-loading,
+    &-background-ghost.ant-btn-link.ant-btn-loading,
+    &.ant-btn-link.ant-btn-loading {
+      &::before {
+        background: transparent;
+      }
+    }
+
+    &:not(
+        .ant-btn-link,
+        .is-disabled,
+        .ant-btn-primary,
+        .ant-btn-success,
+        .ant-btn-warning,
+        .ant-btn-error,
+        .ant-btn-dangerous
+      ) {
+      background: transparent;
+      color: @text-color-base;
+
+      &:hover {
+        color: @button-primary-hover-color;
+      }
+    }
+
+    &-dangerous.ant-btn-primary {
+      &:focus {
+        background: @error-color !important;
+      }
+    }
+
+    &-default.ant-btn-dangerous {
+      border-color: @error-color;
+      background: transparent !important;
+      color: @error-color;
+
+      &:hover,
+      &:focus {
+        border-color: @button-error-hover-color !important;
+        color: @button-error-hover-color !important;
+      }
+    }
+
+    &-default:not(.ant-btn-background-ghost) {
+      border-color: #303030;
+
+      &:hover,
+      &:focus {
+        border-color: @button-cancel-hover-color;
+        color: @button-cancel-hover-color;
+      }
+    }
+
+    &-default.is-disabled {
+      &:hover,
+      &:focus {
+        border-color: #303030;
+        color: rgb(255 255 255 / 30%);
+      }
+    }
+
+    &-success:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) {
+      &:hover,
+      &:focus,
+      &:active {
+        border-color: @button-success-active-color !important;
+        background-color: @button-success-active-color !important;
+        color: @white !important;
+      }
+    }
+
+    &-warning:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) {
+      &:hover,
+      &:focus,
+      &:active {
+        border-color: @button-warn-active-color !important;
+        background-color: @button-warn-active-color !important;
+        color: @white !important;
+      }
+    }
+
+    &-error:not(.is-disabled, .ant-btn-link, .ant-btn-background-ghost) {
+      &:hover,
+      &:focus,
+      &:active {
+        border-color: @button-error-active-color !important;
+        background-color: @button-error-active-color !important;
+        color: @white !important;
+      }
+    }
   }
 }

src/layouts/default/header/index.less

@@ -165,7 +165,7 @@
   }
 
   &--dark {
-    border-bottom: 1px solid #303030;
+    border-bottom: 1px solid @border-color-base;
     border-left: 1px solid @border-color-base;
     background-color: @header-dark-bg-color !important;
     .@{header-prefix-cls}-logo {

src/logics/initAppConfig.ts

@@ -6,7 +6,14 @@ import type { ProjectConfig } from '/#/config';
 import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
 import projectSetting from '/@/settings/projectSetting';
 
-import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import {
+  updateTextColor,
+  updateBorderColor,
+  updateHeaderBgColor,
+  updateSidebarBgColor,
+  updateComponentBgColor,
+  updateAppContentBgColor,
+} from '/@/logics/theme/updateBackground';
 import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
 import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
 import { updateDarkTheme } from '/@/logics/theme/dark';
@@ -44,6 +51,10 @@ export function initAppConfigStore() {
 
   // init dark mode
   updateDarkTheme(darkMode);
+  updateTextColor();
+  updateBorderColor();
+  updateComponentBgColor();
+  updateAppContentBgColor();
   if (darkMode === ThemeEnum.DARK) {
     updateHeaderBgColor();
     updateSidebarBgColor();

src/logics/theme/updateBackground.ts

@@ -3,6 +3,10 @@ import { useAppStore } from '/@/store/modules/app';
 import { ThemeEnum } from '/@/enums/appEnum';
 import { setCssVar } from './util';
 
+const TEXT_COLOR_VAR = '--text-color';
+
+const BORDER_COLOR_VAR = '--border-color';
+
 const HEADER_BG_COLOR_VAR = '--header-bg-color';
 const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
 const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
@@ -11,6 +15,68 @@ const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
 const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
 const SIDER_LIGHTEN_BG_COLOR = '--sider-dark-lighten-bg-color';
 
+const COMPONENT_BACKGROUND_COLOR = '--component-background-color';
+
+const APP_CONTENT_BACKGROUND_COLOR = '--app-content-background-color';
+
+/**
+ * Change the text color of the html
+ * @param color
+ */
+export function updateTextColor(color?: string) {
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#c9d1d9';
+    } else {
+      color = 'rgb(0, 0, 0, 0.85)';
+    }
+  }
+
+  // text color
+  setCssVar(TEXT_COLOR_VAR, color);
+
+  // only #ffffff is light
+  // Only when the background color is #fff, the theme of the menu will be changed to light
+  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
+
+  appStore.setProjectConfig({
+    menuSetting: {
+      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
+    },
+  });
+}
+
+/**
+ * Change the border color of the border
+ * @param color
+ */
+export function updateBorderColor(color?: string) {
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#303030';
+    } else {
+      color = '#eee';
+    }
+  }
+
+  // text color
+  setCssVar(BORDER_COLOR_VAR, color);
+
+  // only #ffffff is light
+  // Only when the background color is #fff, the theme of the menu will be changed to light
+  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
+
+  appStore.setProjectConfig({
+    menuSetting: {
+      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
+    },
+  });
+}
+
 /**
  * Change the background color of the top header
  * @param color
@@ -25,6 +91,7 @@ export function updateHeaderBgColor(color?: string) {
       color = appStore.getHeaderSetting.bgColor;
     }
   }
+
   // bg color
   setCssVar(HEADER_BG_COLOR_VAR, color);
 
@@ -73,3 +140,59 @@ export function updateSidebarBgColor(color?: string) {
     },
   });
 }
+
+/**
+ * Change the background color of the componet
+ * @param color
+ */
+export function updateComponentBgColor(color?: string) {
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#151515';
+    } else {
+      color = '#fff';
+    }
+  }
+  // component color
+  setCssVar(COMPONENT_BACKGROUND_COLOR, color);
+
+  // only #ffffff is light
+  // Only when the background color is #fff, the theme of the menu will be changed to light
+  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
+
+  appStore.setProjectConfig({
+    menuSetting: {
+      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
+    },
+  });
+}
+
+/**
+ * Change the background color of the app content
+ * @param color
+ */
+export function updateAppContentBgColor(color?: string) {
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
+  if (!color) {
+    if (darkMode) {
+      color = '#1e1e1e';
+    } else {
+      color = '#fafafa';
+    }
+  }
+  // app content color
+  setCssVar(APP_CONTENT_BACKGROUND_COLOR, color);
+
+  // only #ffffff is light
+  // Only when the background color is #fff, the theme of the menu will be changed to light
+  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
+
+  appStore.setProjectConfig({
+    menuSetting: {
+      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
+    },
+  });
+}

src/views/demo/page/form/step/Step1.vue

@@ -79,20 +79,20 @@
 
     h3 {
       margin: 0 0 12px;
-      color: @text-color;
+      color: @text-color-base;
       font-size: 16px;
       line-height: 32px;
     }
 
     h4 {
       margin: 0 0 4px;
-      color: @text-color;
+      color: @text-color-base;
       font-size: 14px;
       line-height: 22px;
     }
 
     p {
-      color: @text-color;
+      color: @text-color-base;
     }
   }
 

src/views/demo/page/list/basic/index.vue

@@ -94,14 +94,14 @@
 
         div {
           margin-bottom: 12px;
-          color: @text-color;
+          color: @text-color-base;
           font-size: 14px;
           line-height: 22px;
         }
 
         p {
           margin: 0;
-          color: @text-color;
+          color: @text-color-base;
           font-size: 24px;
           line-height: 32px;
         }

src/views/demo/page/list/card/index.vue

@@ -82,7 +82,7 @@
 
       &-title {
         margin-bottom: 5px;
-        color: @text-color;
+        color: @text-color-base;
         font-size: 16px;
         font-weight: 500;
 

src/views/sys/login/Login.vue

@@ -110,12 +110,18 @@
       -webkit-text-fill-color: #c9d1d9 !important;
       box-shadow: inherit !important;
     }
+
+    .ant-divider-inner-text {
+      color: @text-color-secondary;
+      font-size: 12px;
+    }
   }
 
   .@{prefix-cls} {
     min-height: 100%;
     overflow: hidden;
 
+    /* stylelint-disable-next-line media-query-no-invalid */
     @media (max-width: @screen-xl) {
       background-color: #293146;
 
@@ -136,7 +142,7 @@
       background-repeat: no-repeat;
       background-position: 100%;
       background-size: auto 100%;
-
+      /* stylelint-disable-next-line media-query-no-invalid */
       @media (max-width: @screen-xl) {
         display: none;
       }
@@ -188,19 +194,19 @@
 
     input:not([type='checkbox']) {
       min-width: 360px;
-
+      /* stylelint-disable-next-line media-query-no-invalid */
       @media (max-width: @screen-xl) {
         min-width: 320px;
       }
-
+      /* stylelint-disable-next-line media-query-no-invalid */
       @media (max-width: @screen-lg) {
         min-width: 260px;
       }
-
+      /* stylelint-disable-next-line media-query-no-invalid */
       @media (max-width: @screen-md) {
         min-width: 240px;
       }
-
+      /* stylelint-disable-next-line media-query-no-invalid */
       @media (max-width: @screen-sm) {
         min-width: 160px;
       }
@@ -209,10 +215,5 @@
     .@{countdown-prefix-cls} input {
       min-width: unset;
     }
-
-    .ant-divider-inner-text {
-      color: @text-color-secondary;
-      font-size: 12px;
-    }
   }
 </style>