diff --git a/index.html b/index.html
index a2ca5d5..99a063f 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-cmn-Hans" id="htmlRoot" class>
+<html lang="zh-cmn-Hans" id="htmlRoot">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
@@ -10,12 +10,12 @@
     <div id="app">
       <script>
         ;(() => {
-          const { darkMode, appTheme = '#5d9dfe' } =
+          const { darkMode = 'dark', appTheme = '#5d9dfe' } =
             JSON.parse(window.localStorage.getItem('DESIGN-SETTING')) || {}
 
           let htmlRoot = document.getElementById('htmlRoot')
           if (htmlRoot) {
-            htmlRoot.setAttribute('data-theme', darkMode || 'light')
+            htmlRoot.classList.add(darkMode)
           }
 
           // 设置主题色变量
@@ -29,7 +29,7 @@
         body {
           margin: 0;
         }
-        html[data-theme='dark'] .first-loading-wrap {
+        html.dark .first-loading-wrap {
           background-color: #101014;
         }
         .first-loading-wrap {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2bf2f53..ad9f027 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -27,6 +27,7 @@
         <template #icon>
           <i :class="menu.meta?.icon" />
         </template>
+        {{ menu.meta?.title }}
       </van-tabbar-item>
     </van-tabbar>
   </div>
diff --git a/src/main.ts b/src/main.ts
index beb95fb..af5080b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,7 +11,6 @@ import 'virtual:svg-icons-register'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router, { setupRouter } from './router'
-import { updateDarkSign } from './theme'
 import { setupStore } from '@/store'
 
 async function bootstrap() {
@@ -23,11 +22,6 @@ async function bootstrap() {
   await router.isReady()
   // 路由准备就绪后挂载APP实例
   app.mount('#app', true)
-
-  // 根节点挂载 dark 标识
-  const appDesignSetting = window.localStorage.getItem('DESIGN-SETTING')
-  const darkMode = appDesignSetting && JSON.parse(appDesignSetting).darkMode
-  updateDarkSign(darkMode)
 }
 
 void bootstrap()
diff --git a/src/router/modules.ts b/src/router/modules.ts
index 6f149f3..aea0fed 100644
--- a/src/router/modules.ts
+++ b/src/router/modules.ts
@@ -43,6 +43,26 @@ const routeModuleList: Array<RouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: '/example',
+    name: 'Example',
+    redirect: '/example/index',
+    component: Layout,
+    meta: {
+      title: '示例',
+      icon: 'i-material-symbols:award-star',
+    },
+    children: [
+      {
+        path: 'index',
+        name: 'ExamplePage',
+        meta: {
+          keepAlive: false,
+        },
+        component: () => import('@/views/example/index.vue'),
+      },
+    ],
+  },
   {
     path: '/my',
     name: 'My',
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
index 10bb19c..7370d16 100644
--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@@ -37,7 +37,7 @@ export const appThemeList: string[] = [
 
 const setting: DesignSettingState = {
   // 深色主题
-  darkMode: 'light',
+  darkMode: 'dark',
   // 系统主题色
   appTheme: '#5d9dfe',
   // 系统内置主题色列表
diff --git a/src/styles/common.less b/src/styles/common.less
index 6675a43..fa9a18f 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -10,7 +10,7 @@ html {
   position: relative;
 }
 
-[data-theme='dark'] {
+html.dark {
   &,
   * {
     color-scheme: dark !important;
@@ -22,7 +22,7 @@ html {
   }
 }
 
-[data-theme='light'] {
+html.light {
   &,
   * {
     color-scheme: light !important;
@@ -69,7 +69,6 @@ a:active {
   color: rgb(#0000, 0.7);
 }
 
-/* stylelint-disable-next-line no-duplicate-selectors */
 a:active,
 a:hover {
   outline: 0;
@@ -93,24 +92,16 @@ a:hover {
   transform: scale(1.03);
 }
 
-.xicon {
-  font-size: 18px;
-
-  svg {
-    width: 100% !important;
-    height: 100% !important;
+html.light {
+  .my-card {
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 70%);
   }
 }
 
-.my-card {
-  backdrop-filter: blur(10px);
-  /* stylelint-disable-next-line color-function-notation */
-  background: rgba(255, 255, 255, 70%);
-}
-
-html[data-theme='dark'] {
+html.dark {
   .my-card {
-    /* stylelint-disable-next-line color-function-notation */
+    backdrop-filter: blur(10px);
     background: rgba(30, 30, 30, 70%);
   }
 }
diff --git a/src/views/example/index.vue b/src/views/example/index.vue
new file mode 100644
index 0000000..80138a0
--- /dev/null
+++ b/src/views/example/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="my-4">
+    <van-cell-group inset>
+      <van-cell center title="🌓 暗黑模式">
+        <template #right-icon>
+          <i inline-block align-middle i="dark:carbon-moon carbon-sun" />
+          <span class="ml-2">{{ isDark ? 'Dark' : 'Light' }}</span>
+          <span class="mx-2">{{ isDark }}</span>
+          <van-switch v-model="checked" size="22" @click="toggle()" />
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
+import { useDesignSettingStore } from '@/store/modules/designSetting'
+
+const designStore = useDesignSettingStore()
+
+const isDark = useDark({
+  valueDark: 'dark',
+  valueLight: 'light',
+})
+
+const checked = ref(isDark.value)
+
+const toggleDark = useToggle(isDark)
+
+function toggle() {
+  toggleDark()
+  designStore.setDarkMode(isDark.value ? 'dark' : 'light')
+}
+</script>
+
+<style scoped lang="less">
+
+</style>
diff --git a/src/views/my/ThemeSetting.vue b/src/views/my/ThemeSetting.vue
index 543cbe4..d1f5001 100644
--- a/src/views/my/ThemeSetting.vue
+++ b/src/views/my/ThemeSetting.vue
@@ -2,11 +2,13 @@
   <div>
     <NavBar />
     <van-divider>主题模式</van-divider>
-    <van-cell center title="暗黑模式">
-      <template #right-icon>
-        <van-switch v-model="getDarkMode" />
-      </template>
-    </van-cell>
+    <van-cell-group inset>
+      <van-cell center title="暗黑模式">
+        <template #right-icon>
+          <van-switch v-model="getDarkMode" size="22" />
+        </template>
+      </van-cell>
+    </van-cell-group>
 
     <van-divider>系统主题色</van-divider>
     <div flex="~" justify="center">
@@ -14,8 +16,8 @@
         <span
           v-for="(item, index) in designStore.appThemeList"
           :key="index"
-          h="9"
-          w="9"
+          h="8"
+          w="8"
           items-center
           border="2 rounded-md"
           flex="~"
@@ -32,24 +34,28 @@
     </div>
 
     <van-divider>页面切换动画</van-divider>
-    <van-cell center title="开启动画">
-      <template #right-icon>
-        <van-switch v-model="designStore.isPageAnimate" />
-      </template>
-    </van-cell>
+    <van-cell-group inset>
+      <van-cell center title="开启动画">
+        <template #right-icon>
+          <van-switch v-model="designStore.isPageAnimate" size="22" />
+        </template>
+      </van-cell>
+      <van-cell center title="动画类型">
+        <van-field
+          v-model="animateState.text"
+          readonly
+          class="!p-0"
+          :disabled="!designStore.isPageAnimate"
+          is-link
+          label-class="font-bold"
+          input-align="right"
+          :center="true"
+          :border="false"
+          @click="openAnimatePick"
+        />
+      </van-cell>
+    </van-cell-group>
 
-    <van-field
-      v-model="animateState.text"
-      label="动画类型"
-      readonly
-      :disabled="!designStore.isPageAnimate"
-      is-link
-      label-class="font-bold"
-      input-align="right"
-      :center="true"
-      :border="false"
-      @click="openAnimatePick"
-    />
     <van-popup v-model:show="animateState.showPicker" position="bottom" round>
       <van-picker
         v-model="animateState.value"
@@ -63,19 +69,25 @@
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
 import NavBar from './components/NavBar.vue'
-import { updateDarkSign } from '@/theme'
 import { useDesignSettingStore } from '@/store/modules/designSetting'
 import { animates as animateOptions } from '@/settings/animateSetting'
 
 const designStore = useDesignSettingStore()
 
+const isDark = useDark({
+  valueDark: 'dark',
+  valueLight: 'light',
+})
+
+const toggleDark = useToggle(isDark)
+
 const getDarkMode = computed({
-  get: () => designStore.getDarkMode === 'dark',
-  set: (value) => {
-    const darkMode = value ? 'dark' : 'light'
-    updateDarkSign(darkMode)
-    designStore.setDarkMode(darkMode)
+  get: () => isDark.value,
+  set: () => {
+    toggleDark()
+    designStore.setDarkMode(isDark.value ? 'dark' : 'light')
   },
 })
 
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
deleted file mode 100644
index b5fdde0..0000000
--- a/src/views/welcome/index.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="h-screen flex flex-col items-center justify-center p-8">
-    <!-- <van-cell center title="🌗 暗黑模式">
-      <template #right-icon>
-        <van-switch v-model="getDarkMode" size="18px" />
-      </template>
-    </van-cell> -->
-    <div class="wel-box w-full flex flex-col justify-between">
-      <div class="wel-top">
-        <div class="logo enter-y">
-          <SvgIcon :size="130" name="logo" />
-        </div>
-        <div
-          class="enter-y text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black"
-        >
-          欢迎来到 {{ title }}
-        </div>
-        <div class="enter-y mb-6 mt-4 w-full">
-          <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
-            <van-swipe-item
-              v-for="(text, index) in getSwipeText"
-              :key="index"
-              class="text-center text-gray-700 leading-relaxed dark:text-gray-400"
-            >
-              <p class="text-lg">
-                {{ text.title }}
-              </p>
-              <p class="text-sm">
-                {{ text.details }}
-              </p>
-            </van-swipe-item>
-          </van-swipe>
-        </div>
-      </div>
-      <div class="wel-bottom">
-        <van-button
-          class="enter-y !rounded-md"
-          type="primary"
-          block
-          @click="router.push({ name: 'Login' })"
-        >
-          Let's Get Started
-        </van-button>
-        <a class="enter-y mt-6 text-sm">创建账户？</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useDesignSettingStore } from '@/store/modules/designSetting'
-import SvgIcon from '@/components/SvgIcon.vue'
-import { useGlobSetting } from '@/hooks/setting'
-
-// import { updateDarkSign } from '@/theme'
-
-// const getDarkMode = computed({
-//   get: () => designStore.getDarkMode === 'dark',
-//   set: (value) => {
-//     const darkMode = value ? 'dark' : 'light'
-//     updateDarkSign(darkMode)
-//     designStore.setDarkMode(darkMode)
-//   },
-// })
-
-const designStore = useDesignSettingStore()
-const globSetting = useGlobSetting()
-const router = useRouter()
-
-const { title } = globSetting
-
-const getSwipeText = computed(() => {
-  return [
-    {
-      title: '💡 最新技术栈',
-      details: '基于Vue3、Vant4、Vite、TypeScript等最新技术栈开发',
-    },
-    {
-      title: '⚡️ 轻量快速的热重载',
-      details: '无论应用程序大小如何，都始终极快的模块热重载（HMR）',
-    },
-    {
-      title: '🔩 主题配置',
-      details: '具备主题配置及黑暗主题适配，且持久化保存',
-    },
-    {
-      title: '🛠️ 丰富的 Vite 插件',
-      details: '集成大部分 Vite 插件，无需繁琐配置，开箱即用',
-    },
-  ]
-})
-</script>
-
-<style scoped lang="less">
-  .wel-box {
-  min-height: 50vh;
-  max-width: 45vh;
-  min-width: 30vh;
-  .wel-top {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-  .wel-bottom {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/uno.config.ts b/uno.config.ts
index bfc365a..c7be1aa 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -78,5 +78,6 @@ export default defineConfig({
     'i-simple-icons:atlassian',
     'i-simple-icons:soundcharts',
     'i-simple-icons:docsify',
+    'i-material-symbols:award-star',
   ],
 })
