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/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>