diff --git a/components.d.ts b/components.d.ts
index 00fbf16..561cb46 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
diff --git a/package-lock.json b/package-lock.json
index e0539cb..cb51ad7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/theme-one-dark": "^6.1.2",
+        "@vueuse/core": "^10.7.0",
         "axios": "^1.6.2",
         "codemirror": "^6.0.1",
         "element-plus": "^2.4.3",
@@ -1836,9 +1837,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.14.0",
@@ -2621,14 +2622,14 @@
       "dev": true
     },
     "node_modules/@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.0.tgz",
+      "integrity": "sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.0",
+        "@vueuse/shared": "10.7.0",
+        "vue-demi": ">=0.14.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2660,19 +2661,19 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.0.tgz",
+      "integrity": "sha512-GlaH7tKP2iBCZ3bHNZ6b0cl9g0CJK8lttkBNUX156gWvNYhTKEtbweWLm9rxCPIiwzYcr/5xML6T8ZUEt+DkvA==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.0.tgz",
+      "integrity": "sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==",
       "dependencies": {
-        "vue-demi": "*"
+        "vue-demi": ">=0.14.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -3302,6 +3303,94 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/element-plus/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
diff --git a/package.json b/package.json
index 2e4407d..919de63 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
     "codemirror": "^6.0.1",
     "element-plus": "^2.4.3",
diff --git a/src/assets/dark.vue b/src/assets/dark.vue
new file mode 100644
index 0000000..f5ab215
--- /dev/null
+++ b/src/assets/dark.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24" class="dark-icon">
+    <path
+      d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
+      fill="currentColor" />
+  </svg>
+</template>
diff --git a/src/assets/light.vue b/src/assets/light.vue
new file mode 100644
index 0000000..dbecd08
--- /dev/null
+++ b/src/assets/light.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 24 24" class="light-icon">
+    <path
+      d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
+      fill="currentColor" />
+  </svg>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 0a80b0c..599c27b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,8 @@
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'virtual:uno.css'
 import { createApp } from 'vue'
 import App from './App.vue'
-// import router from './router'
 
 const app = createApp(App)
 
-// app.use(router)
-
 app.mount('#app')
diff --git a/src/views/BaseView.vue b/src/views/BaseView.vue
index e815736..53332e5 100644
--- a/src/views/BaseView.vue
+++ b/src/views/BaseView.vue
@@ -1,17 +1,29 @@
 <template>
-  <ElContainer v-loading="isLoading" class="bg-gray-100 min-h-screen">
-    <ElHeader class="flex items-center justify-between bg-blue-700 text-white p-4">
-      <span class="font-bold sm:text-lg">BILICHAT WEB UI v{{ version }}</span>
+  <ElContainer v-loading="isLoading" class="bg-gray-100 dark:bg-[#0d1117] min-h-screen">
+    <ElHeader
+      class="flex items-center justify-between bg-blue-700 dark:bg-[#010409] text-white p-4">
       <div>
-        <ElButton @click="handleManageCookie" color="rgb(59 130 246 / var(--un-bg-opacity))">
+        <span class="font-bold text-lg">BILICHAT</span>
+        <span class="font-bold hidden sm:inline text-lg">&nbsp;WEB UI v{{ version }}</span>
+      </div>
+
+      <div>
+        <ElButton @click="handleManageCookie" :color="getButtonColor()" :dark="isDark">
           管理cookie
         </ElButton>
+        <ElSwitch
+          class="ml-2"
+          v-model="isDark"
+          style="--el-switch-on-color: #2c2c2c"
+          width="55"
+          :active-action-icon="Dark"
+          :inactive-action-icon="Light"></ElSwitch>
       </div>
     </ElHeader>
     <ElMain class="h-full">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-start h-full">
-        <div class="p-2 bg-white rounded-lg shadow">
-          <h2 class="text-lg font-bold mb-2 mt-2">配置文件</h2>
+        <ElCard style="border-radius: 0.5rem">
+          <h2 class="text-lg font-bold mb-2 mt-0">配置文件</h2>
           <Codemirror
             v-if="formattedBilichat"
             @blur="handleFormattedBilichatChange"
@@ -24,11 +36,11 @@
             :phrases="chinesePhrases"
             style="max-height: 600px"></Codemirror>
           <ElButton class="mt-2 mb-2" @click="saveChange">保存修改</ElButton>
-        </div>
+        </ElCard>
 
-        <div ref="formDiv" class="p-2 bg-white rounded-lg shadow">
+        <ElCard ref="formDiv" style="border-radius: 0.5rem">
           <ElScrollbar>
-            <h2 class="text-lg font-bold mt-2 mb-2">可视化修改</h2>
+            <h2 class="text-lg font-bold mt-0 mb-2">可视化修改</h2>
             <ElForm
               label-width="8rem"
               :model="bilichat"
@@ -170,7 +182,7 @@
             </ElForm>
             <span v-else>未读取到bilichat配置</span>
           </ElScrollbar>
-        </div>
+        </ElCard>
       </div>
     </ElMain>
   </ElContainer>
@@ -215,7 +227,7 @@
       append-to-body
       v-model="isQrcodeDialogVisible">
       <div class="flex justify-center">
-        <QrcodeVue :value="qrcodeUrl" :size="300"></QrcodeVue>
+        <QrcodeVue :value="qrcodeUrl" :size="300" :margin="2"></QrcodeVue>
       </div>
     </ElDialog>
   </ElDialog>
@@ -223,6 +235,8 @@
 <script lang="ts" setup>
 import Minus from '@/assets/Minus.vue'
 import Plus from '@/assets/Plus.vue'
+import Dark from '@/assets/dark.vue'
+import Light from '@/assets/light.vue'
 import type {
   AuthInfo,
   BiliChat,
@@ -234,6 +248,7 @@ import type {
 } from '@/types'
 import { json } from '@codemirror/lang-json'
 import { oneDark } from '@codemirror/theme-one-dark'
+import { useDark } from '@vueuse/core'
 import axios from 'axios'
 import QrcodeVue from 'qrcode.vue'
 import { Codemirror } from 'vue-codemirror'
@@ -243,6 +258,7 @@ const isManageCookieDialogVisible = ref(false)
 const isQrcodeDialogVisible = ref(false)
 const isPopoverVisible = ref(false)
 const isLoading = ref(false)
+const isDark = useDark({ disableTransition: false })
 
 const formDiv: Ref<HTMLElement | undefined> = ref()
 const inputUid = ref<number>()
@@ -491,7 +507,16 @@ const coverDataToLocalString = (ts: number) => {
 }
 
 const getExtensions = () => {
-  return [json(), oneDark]
+  if (isDark.value) {
+    return [json(), oneDark]
+  }
+  return [json()]
+}
+const getButtonColor = () => {
+  if (isDark.value) {
+    return 'rgb(25 50 100 / var(--un-bg-opacity))'
+  }
+  return 'rgb(59 130 246 / var(--un-bg-opacity))'
 }
 </script>
 <style scoped lang="scss"></style>