fix(dark-theme): alert color in dark-theme

修复Alert组件在Dark主题下的颜色问题
vbenjs · Jul 21, 2021 · 9b7ede0 · 9b7ede0
1 parent 8cf004a
commit 9b7ede0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -3,7 +3,9 @@
 - **ApiTreeSelect** 修复未能正确监听`params`变化的问题
 - **BasicTable** 修复可编辑单元格不支持`ellipsis`配置的问题
 - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题
-- **Dark Theme** 修复 tree 组件被选中节点的背景颜色
+- **Dark Theme** 黑暗主题下的配色问题修正
+  - 修复`Tree`组件被选中节点的背景颜色
+  - 修复`Alert`组件的颜色配置
 
 ## 2.6.1(2021-07-19)
 

diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts
@@ -33,14 +33,20 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
             return s;
           case '.ant-steps-item-icon > .ant-steps-icon':
             return s;
+          default:
+            if (s.indexOf('.ant-alert-message') >= 0) {
+              console.log(s);
+            }
+            return s;
         }
         return `[data-theme] ${s}`;
       },
       colorVariables: [...getThemeColors(), ...colors],
     }),
     antdDarkThemePlugin({
       preloadFiles: [
-        path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
+        //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
+        path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
         path.resolve(process.cwd(), 'src/design/index.less'),
       ],
       filter: (id) => (isBuild ? !id.endsWith('antd.less') : true),
@@ -50,6 +56,7 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
         'text-color': '#c9d1d9',
         'text-color-base': '#c9d1d9',
         'component-background': '#151515',
+        'heading-color': 'rgb(255 255 255 / 65%)',
         // black: '#0e1117',
         // #8b949e
         'text-color-secondary': '#8b949e',
@@ -58,6 +65,32 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
         'item-active-bg': '#111b26',
         'app-content-background': 'rgb(255 255 255 / 4%)',
         'tree-node-selected-bg': '#11263c',
+
+        'alert-success-border-color': '#274916',
+        'alert-success-bg-color': '#162312',
+        'alert-success-icon-color': '#49aa19',
+        'alert-info-border-color': '#153450',
+        'alert-info-bg-color': '#111b26',
+        'alert-info-icon-color': '#177ddc',
+        'alert-warning-border-color': '#594214',
+        'alert-warning-bg-color': '#2b2111',
+        'alert-warning-icon-color': '#d89614',
+        'alert-error-border-color': '#58181c',
+        'alert-error-bg-color': '#2a1215',
+        'alert-error-icon-color': '#a61d24',
+
+        //         @alert-success-border-color: @green-3;
+        // @alert-success-bg-color: @green-1;
+        // @alert-success-icon-color: @success-color;
+        // @alert-info-border-color: @primary-3;
+        // @alert-info-bg-color: @primary-1;
+        // @alert-info-icon-color: @info-color;
+        // @alert-warning-border-color: @gold-3;
+        // @alert-warning-bg-color: @gold-1;
+        // @alert-warning-icon-color: @warning-color;
+        // @alert-error-border-color: @red-3;
+        // @alert-error-bg-color: @red-1;
+        // @alert-error-icon-color: @error-color;
       },
     }),
   ];

diff --git a/src/design/theme.less b/src/design/theme.less
@@ -23,10 +23,12 @@ html[data-theme='dark'] {
       0 1px 0 0 #434343 inset;
   }
 
-  .ant-alert-message,
-  .ant-alert-with-description .ant-alert-message,
-  .ant-alert-description {
-    color: rgba(0, 0, 0, 0.85);
+  html[data-theme='light'] {
+    .ant-alert-message,
+    .ant-alert-with-description .ant-alert-message,
+    .ant-alert-description {
+      color: rgba(0, 0, 0, 0.85);
+    }
   }
 
   .ant-checkbox-checked .ant-checkbox-inner::after {