feat(layout): 支持深/浅色模式切换

yulimchen · Apr 25, 2023 · 5178735 · 5178735
1 parent 40aee75
commit 5178735
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 9 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,12 +7,16 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    NavBar: typeof import('./src/components/NavBar/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
     Tabbar: typeof import('./src/components/Tabbar/index.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
+    VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanSpace: typeof import('vant/es')['Space']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']

diff --git a/src/components/NavBar/index.vue b/src/components/NavBar/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useDarkMode, useToggleDarkMode } from "@/hooks/useToggleDarkMode";
+
+const onClickRight = () => {
+  useToggleDarkMode();
+};
+</script>
+
+<template>
+  <van-nav-bar fixed placeholder @click-right="onClickRight">
+    <template #right>
+      <svg-icon class="text-[18px]" :name="useDarkMode() ? 'light' : 'dark'" />
+    </template>
+  </van-nav-bar>
+</template>
+
+<style scoped></style>
diff --git a/src/hooks/useToggleDarkMode.ts b/src/hooks/useToggleDarkMode.ts
@@ -0,0 +1,9 @@
+import { useDarkModeStoreHook } from "@/store/modules/darkMode";
+
+export function useDarkMode() {
+  return useDarkModeStoreHook().darkMode;
+}
+
+export function useToggleDarkMode() {
+  useDarkModeStoreHook().toggleDarkMode();
+}
diff --git a/src/icons/svg/dark.svg b/src/icons/svg/dark.svg
diff --git a/src/icons/svg/light.svg b/src/icons/svg/light.svg
diff --git a/src/layout/index.vue b/src/layout/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import Tabbar from "@/components/Tabbar/index.vue";
+import NavBar from "@/components/NavBar/index.vue";
 import { useCachedViewStoreHook } from "@/store/modules/cachedView";
+import { useDarkMode } from "@/hooks/useToggleDarkMode";
 import { computed } from "vue";
 
 const cachedViews = computed(() => {
@@ -10,16 +12,15 @@ const cachedViews = computed(() => {
 
 <template>
   <div class="app-wrapper">
-    <div class="app-wrapper__content">
+    <van-config-provider :theme="useDarkMode() ? 'dark' : 'light'">
+      <nav-bar />
       <router-view v-slot="{ Component }">
         <keep-alive :include="cachedViews">
           <component :is="Component" />
         </keep-alive>
       </router-view>
-    </div>
-    <div class="app-wrapper__footer">
       <tabbar />
-    </div>
+    </van-config-provider>
   </div>
 </template>
 

diff --git a/src/store/modules/darkMode.ts b/src/store/modules/darkMode.ts
@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import { store } from "@/store";
+
+export const useDarkModeStore = defineStore({
+  id: "dark-mode",
+  state: () => ({
+    darkMode: false
+  }),
+  actions: {
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode;
+      if (this.darkMode) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  }
+});
+
+export function useDarkModeStoreHook() {
+  return useDarkModeStore(store);
+}
diff --git a/src/styles/index.less b/src/styles/index.less
@@ -6,7 +6,8 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  color: var(--color-text);
+  color: var(--van-text-color);
+  background-color: var(--color-background-2);
 }
 
 html {

diff --git a/src/styles/variables.less b/src/styles/variables.less
@@ -1,3 +1,11 @@
 :root {
-  --color-text: #2c3e50;
-}
+  --color-text: var(--van-text-color, #323233);
+  --color-background-2: var(--van-background-2, #fff);
+  --color-block-background: var(--van-border-color, #ebedf0);
+}
+
+html.dark {
+  --color-text: var(--van-text-color, #f5f5f5);
+  --color-background-2: var(--van-background-2, #1c1c1e);
+  --color-block-background: var(--van-border-color, #3a3a3c);
+}
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
@@ -38,7 +38,7 @@ const contentList = reactive([
       </a>
     </div>
     <div
-      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[#eee] mt-[14px]"
+      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(--color-block-background)] mt-[14px]"
     >
       <p class="my-[14px] leading-[24px]">
         🌱 基于 Vue3 全家桶、TypeScript、Vite 构建工具，开箱即用的 H5

diff --git a/src/views/tools/index.vue b/src/views/tools/index.vue
@@ -32,7 +32,7 @@ const handleErrorReq = () => {
       <van-button type="danger" @click="handleErrorReq">失败请求</van-button>
     </van-space>
     <div
-      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[#eee] mt-[14px]"
+      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(--color-block-background)] mt-[14px]"
     >
       <p class="my-[14px] leading-[24px]">
         {{ showList }}