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 { onBeforeMount, watch } from 'vue'; |
||||||
import { getLightColor, getDarkColor } from '@/utils/theme/tool'; |
|
||||||
import { GlobalStore } from '@/store'; |
import { GlobalStore } from '@/store'; |
||||||
import { MsgSuccess } from '@/utils/message'; |
import { storeToRefs } from 'pinia'; |
||||||
|
|
||||||
export const useTheme = () => { |
export const useTheme = () => { |
||||||
const globalStore = GlobalStore(); |
const { themeConfig } = storeToRefs(GlobalStore()); |
||||||
const themeConfig = computed(() => globalStore.themeConfig); |
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') { |
if (themeConfig.value.theme === 'auto') { |
||||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); |
|
||||||
themeConfig.value.theme = prefersDark.matches ? 'dark' : 'light'; |
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; |
const body = document.documentElement as HTMLElement; |
||||||
if (themeConfig.value.theme === 'dark') body.setAttribute('class', 'dark'); |
body.setAttribute('class', theme); |
||||||
else body.setAttribute('class', ''); |
|
||||||
}; |
}; |
||||||
|
|
||||||
const changePrimary = (val: string) => { |
onBeforeMount(() => { |
||||||
if (!val) { |
updateTheme(themeConfig.value.theme); |
||||||
val = '#409EFF'; |
}); |
||||||
MsgSuccess('主题颜色已重置为 #409EFF'); |
|
||||||
} |
/** |
||||||
globalStore.setThemeConfig({ ...themeConfig.value, primary: val }); |
* Called internally by the system for automatically switching themes |
||||||
document.documentElement.style.setProperty( |
*/ |
||||||
'--el-color-primary-dark-2', |
const autoSwitchTheme = () => { |
||||||
`${getDarkColor(themeConfig.value.primary, 0.1)}`, |
let preferTheme = themeConfig.value.theme; |
||||||
); |
if (themeConfig.value.theme === 'auto') { |
||||||
document.documentElement.style.setProperty('--el-color-primary', themeConfig.value.primary); |
preferTheme = prefersDark.matches ? 'dark' : 'light'; |
||||||
for (let i = 1; i <= 9; i++) { |
|
||||||
document.documentElement.style.setProperty( |
|
||||||
`--el-color-primary-light-${i}`, |
|
||||||
`${getLightColor(themeConfig.value.primary, i / 10)}`, |
|
||||||
); |
|
||||||
} |
} |
||||||
|
updateTheme(preferTheme); |
||||||
}; |
}; |
||||||
|
|
||||||
onBeforeMount(() => { |
watch(themeConfig, () => { |
||||||
switchDark(); |
autoSwitchTheme(); |
||||||
changePrimary(themeConfig.value.primary); |
|
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
switchDark, |
autoSwitchTheme, |
||||||
changePrimary, |
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