You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.2 KiB
74 lines
2.2 KiB
9 months ago
|
import { setCssVar } from './util'
|
||
|
|
import { colorIsDark, darken, lighten } from '@/utils/color'
|
||
|
|
import { useAppStore } from '@/store/modules/app'
|
||
|
|
import { ThemeEnum } from '@/enums/appEnum'
|
||
|
|
|
||
|
|
const HEADER_BG_COLOR_VAR = '--header-bg-color'
|
||
|
|
const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color'
|
||
|
|
const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color'
|
||
|
|
|
||
|
|
const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color'
|
||
|
|
const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color'
|
||
|
|
const SIDER_LIGHTEN_BG_COLOR = '--sider-dark-lighten-bg-color'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Change the background color of the top header
|
||
|
|
* @param color
|
||
|
|
*/
|
||
|
|
export function updateHeaderBgColor(color?: string) {
|
||
|
|
const appStore = useAppStore()
|
||
|
|
const darkMode = appStore.getDarkMode === ThemeEnum.DARK
|
||
|
|
if (!color) {
|
||
|
|
if (darkMode)
|
||
|
|
color = '#151515'
|
||
|
|
else
|
||
|
|
color = appStore.getHeaderSetting.bgColor
|
||
|
|
}
|
||
|
|
// bg color
|
||
|
|
setCssVar(HEADER_BG_COLOR_VAR, color)
|
||
|
|
|
||
|
|
// hover color
|
||
|
|
const hoverColor = lighten(color, 6)
|
||
|
|
setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor)
|
||
|
|
setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor)
|
||
|
|
|
||
|
|
// Determine the depth of the color value and automatically switch the theme
|
||
|
|
const isDark = colorIsDark(color)
|
||
|
|
|
||
|
|
appStore.setProjectConfig({
|
||
|
|
headerSetting: {
|
||
|
|
theme: isDark || darkMode ? ThemeEnum.DARK : ThemeEnum.LIGHT,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Change the background color of the left menu
|
||
|
|
* @param color bg color
|
||
|
|
*/
|
||
|
|
export function updateSidebarBgColor(color?: string) {
|
||
|
|
const appStore = useAppStore()
|
||
|
|
|
||
|
|
// if (!isHexColor(color)) return;
|
||
|
|
const darkMode = appStore.getDarkMode === ThemeEnum.DARK
|
||
|
|
if (!color) {
|
||
|
|
if (darkMode)
|
||
|
|
color = '#212121'
|
||
|
|
else
|
||
|
|
color = appStore.getMenuSetting.bgColor
|
||
|
|
}
|
||
|
|
setCssVar(SIDER_DARK_BG_COLOR, color)
|
||
|
|
setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color, 6))
|
||
|
|
setCssVar(SIDER_LIGHTEN_BG_COLOR, lighten(color, 5))
|
||
|
|
|
||
|
|
// only #ffffff is light
|
||
|
|
// Only when the background color is #fff, the theme of the menu will be changed to light
|
||
|
|
const isLight = ['#fff', '#ffffff'].includes(color.toLowerCase())
|
||
|
|
|
||
|
|
appStore.setProjectConfig({
|
||
|
|
menuSetting: {
|
||
|
|
theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|