feat(projects): add switch for customize darkmode transition

soybeanjs · Jun 20, 2023 · 6e0cce4 · 6e0cce4 · vercel · Jun 20, 2023
1 parent d3ebe95
commit 6e0cce4
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 2 deletions.
diff --git a/src/components/common/dark-mode-switch.vue b/src/components/common/dark-mode-switch.vue
@@ -13,6 +13,8 @@ defineOptions({ name: 'DarkModeSwitch' });
 interface Props {
   /** 暗黑模式 */
   dark?: boolean;
+  /** 自定义暗黑模式动画过渡 */
+  customizeTransition?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -38,7 +40,7 @@ async function handleSwitch(event: MouseEvent) {
   const x = event.clientX;
   const y = event.clientY;
 
-  if (!document.startViewTransition) {
+  if (!props.customizeTransition || !document.startViewTransition) {
     darkMode.value = !darkMode.value;
     return;
   }

diff --git a/src/layouts/common/global-header/components/theme-mode.vue b/src/layouts/common/global-header/components/theme-mode.vue
@@ -1,6 +1,11 @@
 <template>
   <hover-container class="w-40px" :inverted="theme.header.inverted" tooltip-content="主题模式">
-    <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" />
+    <dark-mode-switch
+      :dark="theme.darkMode"
+      :customize-transition="theme.isCustomizeDarkModeTransition"
+      class="wh-full"
+      @update:dark="theme.setDarkMode"
+    />
   </hover-container>
 </template>
 

diff --git a/src/layouts/common/setting-drawer/components/dark-mode/index.vue b/src/layouts/common/setting-drawer/components/dark-mode/index.vue
@@ -21,6 +21,16 @@
         </template>
       </n-switch>
     </setting-menu>
+    <setting-menu label="自定义暗黑主题动画过渡">
+      <n-switch :value="theme.isCustomizeDarkModeTransition" @update:value="theme.setIsCustomizeDarkModeTransition">
+        <template #checked>
+          <icon-ic-baseline-do-not-disturb class="text-14px text-white" />
+        </template>
+        <template #unchecked>
+          <icon-ic-round-hdr-auto class="text-14px text-white" />
+        </template>
+      </n-switch>
+    </setting-menu>
     <setting-menu label="侧边栏深色">
       <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
     </setting-menu>

diff --git a/src/settings/theme.json b/src/settings/theme.json
@@ -1,6 +1,7 @@
 {
   "darkMode": false,
   "followSystemTheme": true,
+  "isCustomizeDarkModeTransition": false,
   "layout": {
     "minWidth": 900,
     "mode": "vertical",

diff --git a/src/settings/theme.ts b/src/settings/theme.ts
@@ -37,6 +37,7 @@ const themeColorList = [
 const defaultThemeSetting: Theme.Setting = {
   darkMode: false,
   followSystemTheme: true,
+  isCustomizeDarkModeTransition: false,
   layout: {
     minWidth: 900,
     mode: 'vertical',

diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
@@ -43,6 +43,10 @@ export const useThemeStore = defineStore('theme-store', {
     setFollowSystemTheme(visible: boolean) {
       this.followSystemTheme = visible;
     },
+    /** 设置自动跟随系统主题 */
+    setIsCustomizeDarkModeTransition(isCustomize: boolean) {
+      this.isCustomizeDarkModeTransition = isCustomize;
+    },
     /** 自动跟随系统主题 */
     setAutoFollowSystemMode(darkMode: boolean) {
       if (this.followSystemTheme) {

diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
@@ -90,6 +90,8 @@ declare namespace Theme {
     darkMode: boolean;
     /** 是否自动跟随系统主题 */
     followSystemTheme: boolean;
+    /** 自定义暗黑动画过渡 */
+    isCustomizeDarkModeTransition: boolean;
     /** 布局样式 */
     layout: Layout;
     /** 滚动模式 */