mirror of https://github.com/1Panel-dev/1Panel
Takagi
6 months ago
committed by
GitHub
28 changed files with 247 additions and 184 deletions
|
Before Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 869 B |
@ -1,48 +1,62 @@
|
||||
import { computed, onBeforeMount } from 'vue'; |
||||
import { getLightColor, getDarkColor } from '@/utils/theme/tool'; |
||||
import { onBeforeMount, watch } from 'vue'; |
||||
import { GlobalStore } from '@/store'; |
||||
import { MsgSuccess } from '@/utils/message'; |
||||
import { storeToRefs } from 'pinia'; |
||||
|
||||
export const useTheme = () => { |
||||
const globalStore = GlobalStore(); |
||||
const themeConfig = computed(() => globalStore.themeConfig); |
||||
const { themeConfig } = storeToRefs(GlobalStore()); |
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); |
||||
|
||||
const switchDark = () => { |
||||
/** |
||||
* This method is only executed when loading or manually switching for the first time. |
||||
*/ |
||||
const switchTheme = () => { |
||||
if (themeConfig.value.theme === 'auto') { |
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); |
||||
themeConfig.value.theme = prefersDark.matches ? 'dark' : 'light'; |
||||
if (prefersDark.addEventListener) { |
||||
prefersDark.addEventListener('change', switchAccordingUserProxyTheme); |
||||
} else if (prefersDark.addListener) { |
||||
prefersDark.addListener(switchAccordingUserProxyTheme); |
||||
} |
||||
} else { |
||||
prefersDark.removeEventListener('change', switchAccordingUserProxyTheme); |
||||
prefersDark.removeListener(switchAccordingUserProxyTheme); |
||||
} |
||||
updateTheme(themeConfig.value.theme); |
||||
}; |
||||
|
||||
const switchAccordingUserProxyTheme = (event: MediaQueryListEvent) => { |
||||
const preferTheme = event.matches ? 'dark' : 'light'; |
||||
|
||||
themeConfig.value.theme = preferTheme; |
||||
updateTheme(preferTheme); |
||||
}; |
||||
|
||||
const updateTheme = (theme: string) => { |
||||
const body = document.documentElement as HTMLElement; |
||||
if (themeConfig.value.theme === 'dark') body.setAttribute('class', 'dark'); |
||||
else body.setAttribute('class', ''); |
||||
body.setAttribute('class', theme); |
||||
}; |
||||
|
||||
const changePrimary = (val: string) => { |
||||
if (!val) { |
||||
val = '#409EFF'; |
||||
MsgSuccess('主题颜色已重置为 #409EFF'); |
||||
} |
||||
globalStore.setThemeConfig({ ...themeConfig.value, primary: val }); |
||||
document.documentElement.style.setProperty( |
||||
'--el-color-primary-dark-2', |
||||
`${getDarkColor(themeConfig.value.primary, 0.1)}`, |
||||
); |
||||
document.documentElement.style.setProperty('--el-color-primary', themeConfig.value.primary); |
||||
for (let i = 1; i <= 9; i++) { |
||||
document.documentElement.style.setProperty( |
||||
`--el-color-primary-light-${i}`, |
||||
`${getLightColor(themeConfig.value.primary, i / 10)}`, |
||||
); |
||||
onBeforeMount(() => { |
||||
updateTheme(themeConfig.value.theme); |
||||
}); |
||||
|
||||
/** |
||||
* Called internally by the system for automatically switching themes |
||||
*/ |
||||
const autoSwitchTheme = () => { |
||||
let preferTheme = themeConfig.value.theme; |
||||
if (themeConfig.value.theme === 'auto') { |
||||
preferTheme = prefersDark.matches ? 'dark' : 'light'; |
||||
} |
||||
updateTheme(preferTheme); |
||||
}; |
||||
|
||||
onBeforeMount(() => { |
||||
switchDark(); |
||||
changePrimary(themeConfig.value.primary); |
||||
watch(themeConfig, () => { |
||||
autoSwitchTheme(); |
||||
}); |
||||
|
||||
return { |
||||
switchDark, |
||||
changePrimary, |
||||
autoSwitchTheme, |
||||
switchTheme, |
||||
}; |
||||
}; |
||||
|
||||
@ -1 +1 @@
|
||||
$primary-color: #005eeb; |
||||
$primary-color: var(--el-color-primary); |
||||
|
||||
@ -0,0 +1,2 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-svg-loader" />
|
||||
Loading…
Reference in new issue