diff --git a/src/components/settings/cards/DisplaySettingsCard.vue b/src/components/settings/cards/DisplaySettingsCard.vue
index 344b97d..1692678 100644
--- a/src/components/settings/cards/DisplaySettingsCard.vue
+++ b/src/components/settings/cards/DisplaySettingsCard.vue
@@ -1,8 +1,35 @@
 <template>
   <settings-card border icon="mdi-monitor" title="显示设置">
     <v-list>
-      <setting-item :setting-key="'display.emptySubjectDisplay'"/>
+      <v-list-item>
+        <template #prepend>
+          <v-icon class="mr-3" icon="mdi-theme-light-dark"/>
+        </template>
+        <v-list-item-title>主题模式</v-list-item-title>
+        <v-list-item-subtitle>选择明亮或暗黑主题</v-list-item-subtitle>
+        <template #append>
+          <v-btn-toggle
+            v-model="localTheme"
+            color="primary"
+            density="comfortable"
+          >
+            <v-btn value="light">
+              <v-icon class="mr-2" icon="mdi-white-balance-sunny"/>
+              明亮
+            </v-btn>
+            <v-btn value="dark">
+              <v-icon class="mr-2" icon="mdi-moon-waning-crescent"/>
+              暗黑
+            </v-btn>
+          </v-btn-toggle>
+        </template>
+      </v-list-item>
 
+      <v-divider class="my-2"/>
+      <setting-item :setting-key="'timeCard.enabled'"/>
+
+      <v-divider class="my-2"/>
+      <setting-item :setting-key="'display.emptySubjectDisplay'"/>
 
       <v-divider class="my-2"/>
       <setting-item :setting-key="'display.dynamicSort'"/>
@@ -41,15 +68,29 @@
 <script>
 import SettingsCard from '@/components/SettingsCard.vue';
 import SettingItem from '@/components/settings/SettingItem.vue';
+import {getSetting, setSetting} from '@/utils/settings';
+import {useTheme} from 'vuetify';
 
 export default {
   name: 'DisplaySettingsCard',
   components: {SettingsCard, SettingItem},
-  data() {
 
-    return {};
+  setup() {
+    const theme = useTheme();
+    return {theme};
   },
 
+  data() {
+    return {
+      localTheme: getSetting('theme.mode'),
+    };
+  },
 
+  watch: {
+    localTheme(newValue) {
+      setSetting('theme.mode', newValue);
+      this.theme.global.name.value = newValue;
+    },
+  },
 };
 </script>
diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index 0b720da..df697bd 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -174,14 +174,6 @@
           />
         </v-tabs-window-item>
 
-        <v-tabs-window-item value="theme">
-          <theme-settings-card
-            :loading="loading.theme"
-            border
-            @saved="onSettingsSaved"
-          />
-        </v-tabs-window-item>
-
         <v-tabs-window-item value="notification">
           <notification-sound-settings border />
         </v-tabs-window-item>
@@ -262,7 +254,6 @@ import EditSettingsCard from "@/components/settings/cards/EditSettingsCard.vue";
 import RefreshSettingsCard from "@/components/settings/cards/RefreshSettingsCard.vue";
 import DisplaySettingsCard from "@/components/settings/cards/DisplaySettingsCard.vue";
 import DataProviderSettingsCard from "@/components/settings/cards/DataProviderSettingsCard.vue";
-import ThemeSettingsCard from "@/components/settings/cards/ThemeSettingsCard.vue";
 import EchoChamberCard from "@/components/settings/cards/EchoChamberCard.vue";
 import {
   getSetting,
@@ -298,7 +289,6 @@ export default {
     TeacherListCard,
     AboutCard,
     DataProviderSettingsCard,
-    ThemeSettingsCard,
     EchoChamberCard,
     SettingsExplorer,
     SettingsLinkGenerator,
@@ -424,11 +414,6 @@ export default {
           icon: "mdi-eye",
           value: "display",
         },
-        {
-          title: "主题",
-          icon: "mdi-theme-light-dark",
-          value: "theme",
-        },
         {
           title: "通知铃声",
           icon: "mdi-bell-ring",