refactor: ♻️ refactor dark mode using vueuse useDark

xiangshu233 · Mar 10, 2024 · d2c4fd2 · d2c4fd2
1 parent 3cbf886
commit d2c4fd2
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 170 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,20 +2,22 @@
   <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">
       <div grid="~ cols-8 gap-2">
         <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')
   },
 })