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;