caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add global night mode; 🌟

Browse Source 
新增：全局夜晚模式；
This commit is contained in:
iczer
2020-07-06 21:52:36 +08:00
parent 98e02874ed
commit 4063a4f08a
39 changed files with 480 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/utils/themeUtil.js
View File

@@ -1,39 +1,44 @@
// const varyColor = require('webpack-theme-color-replacer/client/varyColor')
const client = require('webpack-theme-color-replacer/client')
const generate = require('@ant-design/colors/lib/generate').default
const themeColor = require('../config').themeColor
const getDarkColors = require('../utils/colors').getDarkColors
const {theme, themeColor} = require('../config')
const {getDarkColors, isHex, toNum3} = require('../utils/colors')
const themeCfg = require('../config/default').theme
module.exports = {
primaryColor: themeColor,
getThemeColors(color) {
const palettes = generate(color)
const darkBgColors = getDarkColors(color)
return palettes.concat(darkBgColors)
getThemeColors(color, $theme) {
let _theme = $theme || theme
let opts = (_theme == 'night') ? {theme: 'dark'} : undefined
let palettes = generate(color, opts)
const primary = palettes[5]
palettes = palettes.concat(generate(primary))
console.log(palettes)
const darkBgColors = getDarkColors(color, _theme)
const _themeCfg = themeCfg[_theme]
const bgColors = Object.keys(_themeCfg)
.map(key => _themeCfg[key])
.map(color => isHex(color) ? color : toNum3(color).join(','))
let rgb = toNum3(primary).join(',')
return palettes.concat(darkBgColors).concat(bgColors).concat(rgb)
},
changeThemeColor (newColor) {
let lastColor = this.lastColor || this.primaryColor
changeThemeColor (newColor, $theme) {
let options = {
oldColors: this.getThemeColors(lastColor),
newColors: this.getThemeColors(newColor)
newColors: this.getThemeColors(newColor, $theme)
}
let promise = client.changer.changeColor(options)
this.lastColor = lastColor
return promise
},
changeSelector (selector) {
switch (selector) {
case '.ant-layout-sider':
return '.ant-layout-sider-dark'
case '.ant-calendar-today .ant-calendar-date':
return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
case '.ant-btn:focus,.ant-btn:hover':
return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
case '.ant-btn.active,.ant-btn:active':
return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
return ':not(.ant-steps-item-process)' + selector
case '.ant-menu-dark .ant-menu-inline.ant-menu-sub':
return '.ant-menu-dark .ant-menu-inline:not(.ant-menu-sub)'
case '.ant-checkbox-checked .ant-checkbox-inner::after':
return '.ant-checkbox-checked :not(.ant-checkbox-inner)::after'
case '.side-menu .logo h1':
return '.side-menu .logo :not(h1)'
case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
@@ -48,14 +53,29 @@ module.exports = {
}
},
modifyVars(color) {
let darkColors = getDarkColors(color)
let opts = (theme == 'night') ? {theme: 'dark'} : undefined
const darkColors = getDarkColors(color, theme)
const palettes = generate(color, opts)
return {
'primary-color': color,
'info-color': color,
'processing-color': color,
'primary-color': palettes[5],
'primary-1': palettes[0],
'primary-2': palettes[1],
'primary-3': palettes[2],
'primary-4': palettes[3],
'primary-5': palettes[4],
'primary-6': palettes[5],
'primary-7': palettes[6],
'primary-8': palettes[7],
'primary-9': palettes[8],
'primary-10': palettes[9],
'info-color': palettes[5],
'alert-info-bg-color': palettes[0],
'alert-info-border-color': palettes[3],
'processing-color': palettes[5],
'menu-dark-submenu-bg': darkColors[0],
'layout-header-background': darkColors[1],
'layout-trigger-background': darkColors[2]
'layout-trigger-background': darkColors[2],
...themeCfg[theme]
}
}
}