diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
index 419497235eb9043b4d718085a7b4cb775030fd1a..d5f588e5c0407572bb937ca4eb81eb8a8d4a4248 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -9,9 +9,9 @@ import LightMode from './icons/LightMode.vue'
 import ZhLang from './icons/ZhLang.vue'
 import EnLang from './icons/EnLang.vue'
 
-const theme = new Theme('light')
-
-const darkMode = ref(false)
+const defaultDarkMode = !!localStorage.getItem('dark_mode')
+const darkMode = ref(defaultDarkMode)
+const theme = new Theme(getThemeByDarkMode(darkMode.value))
 
 const defaultLanguage = ref(localStorage.getItem('preferred_lang'))
 function useTranslation(target) {
@@ -24,10 +24,15 @@ function useTranslation(target) {
   }
 }
 
+function getThemeByDarkMode(target) {
+  return target ? 'dark' : 'light'
+}
+
 watch(
   () => darkMode.value,
   (darkMode, prevDarkMode) => {
-    theme.applyTheme(darkMode ? 'dark' : 'light')
+    localStorage.setItem('dark_mode', darkMode ? true : '')
+    theme.applyTheme(getThemeByDarkMode(darkMode))
   }
 )