gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: initial switch appearance error (#3)

Browse Source
This commit is contained in:
pengzhanbo 2023-06-29 18:10:40 +08:00
parent d980c361ba
commit ae2fb0b601
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/theme/src/client/components/SwitchAppearance.vue
View File

@ -12,7 +12,7 @@ const checked = ref(false)
const isDark = useDarkMode()
// eslint-disable-next-line @typescript-eslint/no-empty-function
const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
const toggle = typeof document !== 'undefined' ? useAppearance() : () => {}
onMounted(() => {
checked.value = document.documentElement.classList.contains('dark')
@ -36,6 +36,8 @@ function useAppearance() {
}
}
setClass(isDark)
function toggle() {
setClass((isDark = !isDark))

12
packages/theme/templates/build.html
View File

@ -5,11 +5,13 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress {{ version }}">
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
(function() {
const userMode = localStorage.getItem('vuepress-theme-appearance');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.add('dark');
}
})();
</script>
<!--vuepress-ssr-head-->
<!--vuepress-ssr-styles-->