Browse Source
* new dark * change config name * merge master * button use less var * add popover config * style: change less var * better hove color * new style * use @ant-design/dark-theme * add umi-plugin-antd-theme * add theme config * add Welcome style * better config for dark * rm ThemeColorReplacer * remove webpack-theme-color * add load theme info * fix test * add test config * rm more theme values * remove unuse packagepull/5653/head
陈帅
6 years ago
committed by
GitHub
GitHub
16 changed files with 216 additions and 159 deletions
@ -0,0 +1,115 @@ |
|||
export default { |
|||
theme: [ |
|||
{ |
|||
key: 'dark', |
|||
fileName: 'dark.css', |
|||
theme: 'dark', |
|||
}, |
|||
{ |
|||
key: 'dust', |
|||
fileName: 'dust.css', |
|||
modifyVars: { |
|||
'@primary-color': '#F5222D', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'volcano', |
|||
fileName: 'volcano.css', |
|||
modifyVars: { |
|||
'@primary-color': '#FA541C', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'sunset', |
|||
fileName: 'sunset.css', |
|||
modifyVars: { |
|||
'@primary-color': '#FAAD14', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'cyan', |
|||
fileName: 'cyan.css', |
|||
modifyVars: { |
|||
'@primary-color': '#13C2C2', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'green', |
|||
fileName: 'green.css', |
|||
modifyVars: { |
|||
'@primary-color': '#52C41A', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'geekblue', |
|||
fileName: 'geekblue.css', |
|||
modifyVars: { |
|||
'@primary-color': '#2F54EB', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'purple', |
|||
fileName: 'purple.css', |
|||
modifyVars: { |
|||
'@primary-color': '#722ED1', |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
key: 'dust', |
|||
theme: 'dark', |
|||
fileName: 'dark-dust.css', |
|||
modifyVars: { |
|||
'@primary-color': '#F5222D', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'volcano', |
|||
theme: 'dark', |
|||
fileName: 'dark-volcano.css', |
|||
modifyVars: { |
|||
'@primary-color': '#FA541C', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'sunset', |
|||
theme: 'dark', |
|||
fileName: 'dark-sunset.css', |
|||
modifyVars: { |
|||
'@primary-color': '#FAAD14', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'cyan', |
|||
theme: 'dark', |
|||
fileName: 'dark-cyan.css', |
|||
modifyVars: { |
|||
'@primary-color': '#13C2C2', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'green', |
|||
theme: 'dark', |
|||
fileName: 'dark-green.css', |
|||
modifyVars: { |
|||
'@primary-color': '#52C41A', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'geekblue', |
|||
theme: 'dark', |
|||
fileName: 'dark-geekblue.css', |
|||
modifyVars: { |
|||
'@primary-color': '#2F54EB', |
|||
}, |
|||
}, |
|||
{ |
|||
key: 'purple', |
|||
theme: 'dark', |
|||
fileName: 'dark-purple.css', |
|||
modifyVars: { |
|||
'@primary-color': '#722ED1', |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
@ -1,31 +0,0 @@ |
|||
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
|||
/* eslint-disable import/no-extraneous-dependencies */ |
|||
import client from 'webpack-theme-color-replacer/client'; |
|||
import generate from '@ant-design/colors/lib/generate'; |
|||
|
|||
export default { |
|||
getAntdSerials(color: string): string[] { |
|||
const lightCount = 9; |
|||
const divide = 10; |
|||
// 淡化（即less的tint）
|
|||
let lightens = new Array(lightCount).fill(0); |
|||
lightens = lightens.map((_, i) => client.varyColor.lighten(color, i / divide)); |
|||
const colorPalettes = generate(color); |
|||
const rgb = client.varyColor.toNum3(color.replace('#', '')).join(','); |
|||
return lightens.concat(colorPalettes).concat(rgb); |
|||
}, |
|||
changeColor(color?: string): Promise<void> { |
|||
if (!color) { |
|||
return Promise.resolve(); |
|||
} |
|||
const options = { |
|||
// new colors array, one-to-one corresponde with `matchColors`
|
|||
newColors: this.getAntdSerials(color), |
|||
changeUrl(cssUrl: string): string { |
|||
// while router is not `hash` mode, it needs absolute path
|
|||
return `/${cssUrl}`; |
|||
}, |
|||
}; |
|||
return client.changer.changeColor(options, Promise); |
|||
}, |
|||
}; |
|||
@ -0,0 +1,8 @@ |
|||
@import '~antd/lib/style/themes/default.less'; |
|||
|
|||
.pre { |
|||
margin: 12px 0; |
|||
padding: 12px 20px; |
|||
background: @input-bg; |
|||
box-shadow: @card-shadow; |
|||
} |
|||
Loading…
Reference in new issue