diff --git a/index.html b/index.html
index f4696fe..8669991 100644
--- a/index.html
+++ b/index.html
@@ -6,16 +6,6 @@
     <link rel="apple-touch-icon" href="/pwa-192x192.png" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9" />
     <meta name="msapplication-TileColor" content="#00aba9" />
-    <script>
-      (function () {
-        const prefersDark
-    = window.matchMedia
-    && window.matchMedia('(prefers-color-scheme: dark)').matches
-  const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
-  if (setting === 'dark' || (prefersDark && setting !== 'light'))
-          document.documentElement.classList.toggle('dark', true)
-})()
-    </script>
   </head>
 
   <body class="font-sans">
diff --git a/src/App.vue b/src/App.vue
index 9c7d943..9594e7e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+const { isDark } = useDark()
+
 useHead({
   title: '合肥市南园学校19预科2班',
   meta: [
     { name: 'description', content: '合肥市南园学校19预科2班纪念项目' },
     {
       name: 'theme-color',
-      content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
+      content: computed(() => isDark ? '#00aba9' : '#ffffff'),
     },
   ],
   link: [
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 05df478..054c76e 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -105,6 +105,7 @@ declare global {
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
   const toggleDark: typeof import('./composables/dark')['toggleDark']
+  const toggleTheme: typeof import('./composables/dark')['toggleTheme']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -148,7 +149,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
-  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDark: typeof import('./composables/dark')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
   const useDebounce: typeof import('@vueuse/core')['useDebounce']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
@@ -342,7 +343,6 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -371,7 +371,6 @@ declare module 'vue' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@@ -402,7 +401,6 @@ declare module 'vue' {
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly toggleDark: UnwrapRef<typeof import('./composables/dark')['toggleDark']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -446,7 +444,7 @@ declare module 'vue' {
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
     readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
     readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
-    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDark: UnwrapRef<typeof import('./composables/dark')['useDark']>
     readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
     readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
     readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
@@ -634,7 +632,6 @@ declare module '@vue/runtime-core' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly isDark: UnwrapRef<typeof import('./composables/dark')['isDark']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -663,7 +660,6 @@ declare module '@vue/runtime-core' {
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
-    readonly preferredDark: UnwrapRef<typeof import('./composables/dark')['preferredDark']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
@@ -694,7 +690,6 @@ declare module '@vue/runtime-core' {
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly toggleDark: UnwrapRef<typeof import('./composables/dark')['toggleDark']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -738,7 +733,7 @@ declare module '@vue/runtime-core' {
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
     readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
     readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
-    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDark: UnwrapRef<typeof import('./composables/dark')['useDark']>
     readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
     readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
     readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
diff --git a/src/components.d.ts b/src/components.d.ts
index 1ba2639..306b936 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ChangeLog: typeof import('./components/ChangeLog.vue')['default']
-    Footer: typeof import('./components/Footer.vue')['default']
     Nav: typeof import('./components/Nav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index ccf4153..2670bfa 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -19,10 +19,12 @@ const pages = [
 ]
 
 const { t } = useI18n()
+
+const { isDark, toggleDark } = useDark()
 </script>
 
 <template>
-  <v-app-bar class="!static">
+  <v-app-bar app class="!static">
     <img class="mx-3 w-40px" src="/favicon.svg">
 
     <router-link to="/">
@@ -50,7 +52,7 @@ const { t } = useI18n()
       </template>
 
       <v-list :lines="false" density="compact" nav>
-        <v-list-item v-for="(page, index) in pages" :key="index" color="primary" :value="index" :to="page.page">
+        <v-list-item v-for="(page, index) in pages" :key="index" :value="index" :to="page.page">
           <v-list-item-title>{{ page.title }}</v-list-item-title>
         </v-list-item>
       </v-list>
diff --git a/src/composables/dark.ts b/src/composables/dark.ts
index 5ad5936..5be16ad 100644
--- a/src/composables/dark.ts
+++ b/src/composables/dark.ts
@@ -1,4 +1,13 @@
-// these APIs are auto-imported from @vueuse/core
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
-export const preferredDark = usePreferredDark()
+import { useTheme } from 'vuetify'
+
+export function useDark() {
+  const theme = useTheme()
+
+  const isDark = theme.global.current.value.dark
+
+  const toggleDark = () => theme.global.name.value = theme.global.current.value.dark
+    ? 'light'
+    : 'dark'
+
+  return { isDark, toggleDark }
+}
diff --git a/src/layouts/404.vue b/src/layouts/404.vue
index e10cde5..2d7d059 100644
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@@ -4,7 +4,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <main class="p-x4 p-y10 text-center text-teal-700 dark:text-gray-200">
+  <main class="p-x4 p-y10 text-center">
     <div class="text-4xl">
       <div class="i-carbon-warning inline-block" />
     </div>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 52f8e4c..a8dd019 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,17 +1,15 @@
 <template>
-  <v-theme-provider :theme="isDark ? 'dark' : 'light'">
-    <v-layout class="text-gray-700 dark:text-gray-200 flex flex-col">
-      <Nav />
+  <v-app class="flex flex-col">
+    <Nav />
 
-      <v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
-        <router-view v-slot="{ Component }">
-          <transition name="fade">
-            <div class="prose max-w-110ch m-auto p-3">
-              <component :is="Component" />
-            </div>
-          </transition>
-        </router-view>
-      </v-main>
-    </v-layout>
-  </v-theme-provider>
+    <v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
+      <router-view v-slot="{ Component }">
+        <transition name="fade">
+          <div class="prose max-w-110ch m-auto p-3">
+            <component :is="Component" />
+          </div>
+        </transition>
+      </router-view>
+    </v-main>
+  </v-app>
 </template>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 5a104d5..df03a9b 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,17 +1,15 @@
 <template>
-  <v-theme-provider :theme="isDark ? 'dark' : 'light'">
-    <v-app class="text-gray-700 dark:text-gray-200 flex flex-col">
-      <Nav />
+  <v-app class="flex flex-col">
+    <Nav />
 
-      <div style="--v-layout-top: 25px" class="m-auto">
-        <router-view v-slot="{ Component }">
-          <transition name="fade">
-            <div class="prose max-w-110ch m-auto">
-              <component :is="Component" />
-            </div>
-          </transition>
-        </router-view>
-      </div>
-    </v-app>
-  </v-theme-provider>
+    <div style="--v-layout-top: 25px" class="m-auto">
+      <router-view v-slot="{ Component }">
+        <transition name="fade">
+          <div class="prose max-w-110ch m-auto">
+            <component :is="Component" />
+          </div>
+        </transition>
+      </router-view>
+    </div>
+  </v-app>
 </template>
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index ed73dd5..20f0542 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -4,7 +4,58 @@ import { aliases, mdi } from 'vuetify/iconsets/mdi'
 
 import '@mdi/font/css/materialdesignicons.css'
 
+const light = {
+  dark: false,
+  colors: {
+    'primary': '#9155FD',
+    'secondary': '#8A8D93',
+    'surface': '#F4F5FA',
+    'background': '#F4F5FA',
+
+    'success': '#56CA00',
+    'info': '#16B1FF',
+    'warning': '#FFB400',
+    'error': '#FF4C51',
+
+    'on-primary': '#FFFFFF',
+    'on-success': '#FFFFFF',
+    'on-warning': '#FFFFFF',
+    'on-secondary': '#FFFFFF',
+    'on-background': '#3A3541',
+    'on-surface': '#3A3541',
+  },
+}
+
+const dark = {
+  dark: true,
+  colors: {
+    'primary': '#9155FD',
+    'secondary': '#8A8D93',
+    'surface': '#212121',
+    'background': '#121212',
+
+    'success': '#56CA00',
+    'info': '#16B1FF',
+    'warning': '#FFB400',
+    'error': '#FF4C51',
+
+    'on-primary': '#FFFFFF',
+    'on-success': '#FFFFFF',
+    'on-warning': '#FFFFFF',
+    'on-secondary': '#FFFFFF',
+    'on-background': '#FFFFFF',
+    'on-surface': '#FFFFFF',
+  },
+}
+
 export default createVuetify({
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light,
+      dark,
+    },
+  },
   icons: {
     defaultSet: 'mdi',
     aliases,
diff --git a/src/styles/main.css b/src/styles/main.css
index ffe8c08..7ceeeec 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -11,11 +11,6 @@ body,
   font-family: "LXGW WenKai Mono", sans-serif;
 }
 
-html.dark {
-  background: #121212;
-  color-scheme: dark;
-}
-
 #nprogress {
   pointer-events: none;
 }
