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
陈帅
7 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