diff --git a/src/App.vue b/src/App.vue
index 74a5cd7..90420fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import "normalize.css"
 import { zhCN, dateZhCN, darkTheme } from "naive-ui"
-import { isDark } from "./shared/composables/dark"
 import hljs from "highlight.js/lib/core"
 import c from "highlight.js/lib/languages/c"
 import python from "highlight.js/lib/languages/python"
 import "./index.css"
 
-const theme = computed(() => (isDark.value ? darkTheme : null))
-
 hljs.registerLanguage("c", c)
 hljs.registerLanguage("python", python)
+
+const isDark = useDark()
 </script>
 
 <template>
   <n-config-provider
-    inline-theme-disabled
-    :theme="theme"
+    :theme="isDark ? darkTheme : null"
     :locale="zhCN"
     :date-locale="dateZhCN"
     :hljs="hljs"
diff --git a/src/shared/components/CodeEditor.vue b/src/shared/components/CodeEditor.vue
index 62572f6..577c55e 100644
--- a/src/shared/components/CodeEditor.vue
+++ b/src/shared/components/CodeEditor.vue
@@ -6,7 +6,6 @@ import { EditorView } from "@codemirror/view"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
 import { LANGUAGE } from "~/utils/types"
-import { isDark } from "../composables/dark"
 
 const styleTheme = EditorView.baseTheme({
   "& .cm-scroller": {
@@ -38,6 +37,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const code = ref(props.modelValue)
+
+const isDark = useDark()
+
 watch(
   () => props.modelValue,
   (v) => {
diff --git a/src/shared/components/Header.vue b/src/shared/components/Header.vue
index cfa183a..93c9b08 100644
--- a/src/shared/components/Header.vue
+++ b/src/shared/components/Header.vue
@@ -2,7 +2,6 @@
 import { logout } from "../api"
 import { useUserStore } from "../store/user"
 import { useConfigStore } from "../store/config"
-import { isDark, toggleDark } from "~/shared/composables/dark"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
 import { RouterLink } from "vue-router"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
@@ -13,6 +12,8 @@ import {
 import Sunny from "../icons/Sunny.vue"
 import Moon from "../icons/Moon.vue"
 
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 const userStore = useUserStore()
 const configStore = useConfigStore()
 const route = useRoute()
@@ -52,7 +53,8 @@ const menus = computed<MenuOption[]>(() => [
     key: "rank",
   },
   {
-    label: () => h(RouterLink, { to: "/announcement" }, { default: () => "公告" }),
+    label: () =>
+      h(RouterLink, { to: "/announcement" }, { default: () => "公告" }),
     key: "announcement",
   },
   {
diff --git a/src/shared/composables/dark.ts b/src/shared/composables/dark.ts
deleted file mode 100644
index 6641d01..0000000
--- a/src/shared/composables/dark.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isDark = useLocalStorage("theme-appearance", false)
-export const toggleDark = useToggle(isDark)
diff --git a/src/shared/composables/learn.ts b/src/shared/composables/learn.ts
deleted file mode 100644
index e986049..0000000
--- a/src/shared/composables/learn.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const code = ref("")