43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { onMounted, watch } from 'vue'
|
|
|
|
import { useElementPlusTheme } from 'use-element-plus-theme'
|
|
import { useConfig } from '@/stores/config'
|
|
|
|
const useSetTheme = () => {
|
|
const configStore = useConfig()
|
|
const elementPlusTheme = useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
|
|
const updateTheme = () => {
|
|
const root = document.documentElement
|
|
root.style.setProperty('--vxe-table-header-background-color', configStore.getColorVal('tableHeaderBackground'))
|
|
root.style.setProperty('--vxe-table-header-font-color', configStore.getColorVal('tableHeaderColor'))
|
|
root.style.setProperty('--vxe-table-row-current-background-color', configStore.getColorVal('tableCurrent'))
|
|
root.style.setProperty('--vxe-table-row-hover-background-color', configStore.getColorVal('tableCurrent'))
|
|
root.style.setProperty(
|
|
'--vxe-table-row-hover-current-background-color',
|
|
configStore.getColorVal('tableCurrent')
|
|
)
|
|
root.style.setProperty(
|
|
'--vxe-table-row-hover-striped-background-color',
|
|
configStore.getColorVal('tableCurrent')
|
|
)
|
|
}
|
|
onMounted(updateTheme)
|
|
watch(
|
|
() => configStore.getColorVal('elementUiPrimary'),
|
|
() => {
|
|
elementPlusTheme.changeTheme(configStore.getColorVal('elementUiPrimary'))
|
|
}
|
|
)
|
|
watch(
|
|
[
|
|
() => configStore.getColorVal('tableHeaderBackground'),
|
|
() => configStore.getColorVal('tableHeaderColor'),
|
|
() => configStore.getColorVal('tableCurrent')
|
|
],
|
|
() => {
|
|
updateTheme()
|
|
}
|
|
)
|
|
}
|
|
export default useSetTheme
|