新增哀悼模式和色弱模式

fantastic-mobile · Jun 28, 2024 · 7501268 · 7501268
1 parent fa3114e
commit 7501268
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/src/components/AppSetting/index.vue b/src/components/AppSetting/index.vue
@@ -112,6 +112,18 @@ function handleCopy() {
         </div>
         <HToggle v-model="settingsStore.settings.app.enableProgress" />
       </div>
+      <div class="flex items-center justify-between gap-4 rounded-2 px-4 py-2">
+        <div class="flex flex-shrink-0 items-center gap-2 text-sm">
+          哀悼模式
+        </div>
+        <HToggle v-model="settingsStore.settings.app.enableMournMode" />
+      </div>
+      <div class="flex items-center justify-between gap-4 rounded-2 px-4 py-2">
+        <div class="flex flex-shrink-0 items-center gap-2 text-sm">
+          色弱模式
+        </div>
+        <HToggle v-model="settingsStore.settings.app.enableColorAmblyopiaMode" />
+      </div>
       <div class="flex items-center justify-between gap-4 rounded-2 px-4 py-2">
         <div class="flex flex-shrink-0 items-center gap-2 text-sm">
           返回顶部

diff --git a/src/settings.default.ts b/src/settings.default.ts
@@ -3,6 +3,8 @@
 const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   app: {
     colorScheme: 'light',
+    enableMournMode: false,
+    enableColorAmblyopiaMode: false,
     enablePermission: false,
     enableProgress: true,
     enableDynamicTitle: false,

diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
@@ -36,6 +36,23 @@ const useSettingsStore = defineStore(
           break
       }
     }
+    watch([
+      () => settings.value.app.enableMournMode,
+      () => settings.value.app.enableColorAmblyopiaMode,
+    ], (val) => {
+      document.documentElement.style.removeProperty('filter')
+      if (val[0] && val[1]) {
+        document.documentElement.style.setProperty('filter', 'grayscale(100%) invert(80%)')
+      }
+      else if (val[0]) {
+        document.documentElement.style.setProperty('filter', 'grayscale(100%)')
+      }
+      else if (val[1]) {
+        document.documentElement.style.setProperty('filter', 'invert(80%)')
+      }
+    }, {
+      immediate: true,
+    })
 
     const title = ref('')
     // 设置网页标题

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -14,6 +14,16 @@ declare namespace Settings {
      * @可选值 `'dark'` 暗黑模式
      */
     colorScheme?: '' | 'light' | 'dark'
+    /**
+     * 是否开启哀悼模式
+     * @默认值 `false`
+     */
+    enableMournMode?: boolean
+    /**
+     * 是否开启色弱模式
+     * @默认值 `false`
+     */
+    enableColorAmblyopiaMode?: boolean
     /**
      * 是否开启权限功能
      * @默认值 `false`