diff --git a/src/App.vue b/src/App.vue
index e9756711..9fb00e08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,11 +5,7 @@ const appStore = useAppStore();
 </script>
 
 <template>
-  <el-config-provider
-    :locale="appStore.locale"
-    :size="appStore.size"
-    theme="dark"
-  >
+  <el-config-provider :locale="appStore.locale" :size="appStore.size">
     <router-view />
   </el-config-provider>
 </template>
diff --git a/src/settings.ts b/src/settings.ts
index f1eab55f..b85df72e 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -17,7 +17,7 @@ const defaultSettings: DefaultSettings = {
   sidebarLogo: true,
   errorLog: 'production',
   layout: 'left',
-  theme: 'light'
+  theme: 'dark'
 };
 
 export default defaultSettings;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 0b69453e..ec6ed276 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -26,6 +26,7 @@ export const useSettingsStore = defineStore('setting', () => {
   const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView);
   const fixedHeader = ref<boolean>(defaultSettings.fixedHeader);
   const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
+  const theme = useStorage('vueuse-color-scheme', defaultSettings.theme);
 
   const layout = useStorage<string>('layout', defaultSettings.layout);