@ -3,64 +3,101 @@ const {theme} = require('../config')
const { getMenuColors , getAntdColors , getThemeToggleColors , getFunctionalColors } = require ( '../utils/colors' )
const { ANTD } = require ( '../config/default' )
module . exports = {
getThemeColors ( color , $theme ) {
const _color = color || theme . color
const mode = $theme || theme . mode
const replaceColors = getThemeToggleColors ( _color , mode )
const themeColors = [
... replaceColors . mainColors ,
... replaceColors . subColors ,
... replaceColors . menuColors ,
... replaceColors . contentColors ,
... replaceColors . rgbColors ,
... replaceColors . functionalColors . success ,
... replaceColors . functionalColors . warning ,
... replaceColors . functionalColors . error ,
]
return themeColors
} ,
changeThemeColor ( newColor , $theme ) {
let promise = client . changer . changeColor ( { newColors : this . getThemeColors ( newColor , $theme ) } )
return promise
} ,
modifyVars ( color ) {
let _color = color || theme . color
const palettes = getAntdColors ( _color , theme . mode )
const menuColors = getMenuColors ( _color , theme . mode )
const { success , warning , error } = getFunctionalColors ( theme . mode )
const primary = palettes [ 5 ]
return {
'primary-color' : primary ,
'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' : primary ,
'success-color' : success [ 5 ] ,
'warning-color' : warning [ 5 ] ,
'error-color' : error [ 5 ] ,
'alert-info-bg-color' : palettes [ 0 ] ,
'alert-info-border-color' : palettes [ 2 ] ,
'alert-success-bg-color' : success [ 0 ] ,
'alert-success-border-color' : success [ 2 ] ,
'alert-warning-bg-color' : warning [ 0 ] ,
'alert-warning-border-color' : warning [ 2 ] ,
'alert-error-bg-color' : error [ 0 ] ,
'alert-error-border-color' : error [ 2 ] ,
'processing-color' : primary ,
'menu-dark-submenu-bg' : menuColors [ 0 ] ,
'layout-header-background' : menuColors [ 1 ] ,
'layout-trigger-background' : menuColors [ 2 ] ,
'btn-danger-bg' : error [ 4 ] ,
'btn-danger-border' : error [ 4 ] ,
... ANTD . theme [ theme . mode ]
}
function getThemeColors ( color , $theme ) {
const _color = color || theme . color
const mode = $theme || theme . mode
const replaceColors = getThemeToggleColors ( _color , mode )
const themeColors = [
... replaceColors . mainColors ,
... replaceColors . subColors ,
... replaceColors . menuColors ,
... replaceColors . contentColors ,
... replaceColors . rgbColors ,
... replaceColors . functionalColors . success ,
... replaceColors . functionalColors . warning ,
... replaceColors . functionalColors . error ,
]
return themeColors
}
function changeThemeColor ( newColor , $theme ) {
let promise = client . changer . changeColor ( { newColors : getThemeColors ( newColor , $theme ) } )
return promise
}
function modifyVars ( color ) {
let _color = color || theme . color
const palettes = getAntdColors ( _color , theme . mode )
const menuColors = getMenuColors ( _color , theme . mode )
const { success , warning , error } = getFunctionalColors ( theme . mode )
const primary = palettes [ 5 ]
return {
'primary-color' : primary ,
'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' : primary ,
'success-color' : success [ 5 ] ,
'warning-color' : warning [ 5 ] ,
'error-color' : error [ 5 ] ,
'alert-info-bg-color' : palettes [ 0 ] ,
'alert-info-border-color' : palettes [ 2 ] ,
'alert-success-bg-color' : success [ 0 ] ,
'alert-success-border-color' : success [ 2 ] ,
'alert-warning-bg-color' : warning [ 0 ] ,
'alert-warning-border-color' : warning [ 2 ] ,
'alert-error-bg-color' : error [ 0 ] ,
'alert-error-border-color' : error [ 2 ] ,
'processing-color' : primary ,
'menu-dark-submenu-bg' : menuColors [ 0 ] ,
'layout-header-background' : menuColors [ 1 ] ,
'layout-trigger-background' : menuColors [ 2 ] ,
'btn-danger-bg' : error [ 4 ] ,
'btn-danger-border' : error [ 4 ] ,
... ANTD . theme [ theme . mode ]
}
}
function loadLocalTheme ( localSetting ) {
if ( localSetting ) {
let { color , mode } = localSetting . theme
color = color || theme . color
mode = mode || theme . mode
changeThemeColor ( color , mode )
}
}
/ * *
* 获取本地保存的配置
* @ param load { boolean } 是否加载配置中的主题
* @ returns { Object }
* /
function getLocalSetting ( loadTheme ) {
let localSetting = { }
try {
const localSettingStr = localStorage . getItem ( process . env . VUE _APP _SETTING _KEY )
localSetting = JSON . parse ( localSettingStr )
} catch ( e ) {
console . error ( e )
}
if ( loadTheme ) {
console . log ( localSetting )
loadLocalTheme ( localSetting )
}
return localSetting
}
module . exports = {
getThemeColors ,
changeThemeColor ,
modifyVars ,
loadLocalTheme ,
getLocalSetting
}
iczer
4 years ago