diff --git a/packages/theme/src/client/components/SwitchAppearance.vue b/packages/theme/src/client/components/SwitchAppearance.vue
index 4915e6b9..2ae748df 100644
--- a/packages/theme/src/client/components/SwitchAppearance.vue
+++ b/packages/theme/src/client/components/SwitchAppearance.vue
@@ -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))
 
diff --git a/packages/theme/templates/build.html b/packages/theme/templates/build.html
index 793934a6..c738dea0 100644
--- a/packages/theme/templates/build.html
+++ b/packages/theme/templates/build.html
@@ -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-->