Commit 9b7ede09b9efe4d5a15ab0cdeadac480a29c0f62
1 parent
8cf004a5
fix(dark-theme): alert color in dark-theme
修复Alert组件在Dark主题下的颜色问题
Showing
3 changed files
with
43 additions
and
6 deletions
CHANGELOG.zh_CN.md
| ... | ... | @@ -3,7 +3,9 @@ |
| 3 | 3 | - **ApiTreeSelect** 修复未能正确监听`params`变化的问题 |
| 4 | 4 | - **BasicTable** 修复可编辑单元格不支持`ellipsis`配置的问题 |
| 5 | 5 | - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题 |
| 6 | -- **Dark Theme** 修复 tree 组件被选中节点的背景颜色 | |
| 6 | +- **Dark Theme** 黑暗主题下的配色问题修正 | |
| 7 | + - 修复`Tree`组件被选中节点的背景颜色 | |
| 8 | + - 修复`Alert`组件的颜色配置 | |
| 7 | 9 | |
| 8 | 10 | ## 2.6.1(2021-07-19) |
| 9 | 11 | ... | ... |
build/vite/plugin/theme.ts
| ... | ... | @@ -33,6 +33,11 @@ export function configThemePlugin(isBuild: boolean): Plugin[] { |
| 33 | 33 | return s; |
| 34 | 34 | case '.ant-steps-item-icon > .ant-steps-icon': |
| 35 | 35 | return s; |
| 36 | + default: | |
| 37 | + if (s.indexOf('.ant-alert-message') >= 0) { | |
| 38 | + console.log(s); | |
| 39 | + } | |
| 40 | + return s; | |
| 36 | 41 | } |
| 37 | 42 | return `[data-theme] ${s}`; |
| 38 | 43 | }, |
| ... | ... | @@ -40,7 +45,8 @@ export function configThemePlugin(isBuild: boolean): Plugin[] { |
| 40 | 45 | }), |
| 41 | 46 | antdDarkThemePlugin({ |
| 42 | 47 | preloadFiles: [ |
| 43 | - path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'), | |
| 48 | + //path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'), | |
| 49 | + path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'), | |
| 44 | 50 | path.resolve(process.cwd(), 'src/design/index.less'), |
| 45 | 51 | ], |
| 46 | 52 | filter: (id) => (isBuild ? !id.endsWith('antd.less') : true), |
| ... | ... | @@ -50,6 +56,7 @@ export function configThemePlugin(isBuild: boolean): Plugin[] { |
| 50 | 56 | 'text-color': '#c9d1d9', |
| 51 | 57 | 'text-color-base': '#c9d1d9', |
| 52 | 58 | 'component-background': '#151515', |
| 59 | + 'heading-color': 'rgb(255 255 255 / 65%)', | |
| 53 | 60 | // black: '#0e1117', |
| 54 | 61 | // #8b949e |
| 55 | 62 | 'text-color-secondary': '#8b949e', |
| ... | ... | @@ -58,6 +65,32 @@ export function configThemePlugin(isBuild: boolean): Plugin[] { |
| 58 | 65 | 'item-active-bg': '#111b26', |
| 59 | 66 | 'app-content-background': 'rgb(255 255 255 / 4%)', |
| 60 | 67 | 'tree-node-selected-bg': '#11263c', |
| 68 | + | |
| 69 | + 'alert-success-border-color': '#274916', | |
| 70 | + 'alert-success-bg-color': '#162312', | |
| 71 | + 'alert-success-icon-color': '#49aa19', | |
| 72 | + 'alert-info-border-color': '#153450', | |
| 73 | + 'alert-info-bg-color': '#111b26', | |
| 74 | + 'alert-info-icon-color': '#177ddc', | |
| 75 | + 'alert-warning-border-color': '#594214', | |
| 76 | + 'alert-warning-bg-color': '#2b2111', | |
| 77 | + 'alert-warning-icon-color': '#d89614', | |
| 78 | + 'alert-error-border-color': '#58181c', | |
| 79 | + 'alert-error-bg-color': '#2a1215', | |
| 80 | + 'alert-error-icon-color': '#a61d24', | |
| 81 | + | |
| 82 | + // @alert-success-border-color: @green-3; | |
| 83 | + // @alert-success-bg-color: @green-1; | |
| 84 | + // @alert-success-icon-color: @success-color; | |
| 85 | + // @alert-info-border-color: @primary-3; | |
| 86 | + // @alert-info-bg-color: @primary-1; | |
| 87 | + // @alert-info-icon-color: @info-color; | |
| 88 | + // @alert-warning-border-color: @gold-3; | |
| 89 | + // @alert-warning-bg-color: @gold-1; | |
| 90 | + // @alert-warning-icon-color: @warning-color; | |
| 91 | + // @alert-error-border-color: @red-3; | |
| 92 | + // @alert-error-bg-color: @red-1; | |
| 93 | + // @alert-error-icon-color: @error-color; | |
| 61 | 94 | }, |
| 62 | 95 | }), |
| 63 | 96 | ]; | ... | ... |
src/design/theme.less
| ... | ... | @@ -23,10 +23,12 @@ html[data-theme='dark'] { |
| 23 | 23 | 0 1px 0 0 #434343 inset; |
| 24 | 24 | } |
| 25 | 25 | |
| 26 | - .ant-alert-message, | |
| 27 | - .ant-alert-with-description .ant-alert-message, | |
| 28 | - .ant-alert-description { | |
| 29 | - color: rgba(0, 0, 0, 0.85); | |
| 26 | + html[data-theme='light'] { | |
| 27 | + .ant-alert-message, | |
| 28 | + .ant-alert-with-description .ant-alert-message, | |
| 29 | + .ant-alert-description { | |
| 30 | + color: rgba(0, 0, 0, 0.85); | |
| 31 | + } | |
| 30 | 32 | } |
| 31 | 33 | |
| 32 | 34 | .ant-checkbox-checked .ant-checkbox-inner::after { | ... | ... |