From 302fef6a398545fbbdbb8ee21f21aa3dc57876b5 Mon Sep 17 00:00:00 2001
From: ~li <miciili-02@outlook.com>
Date: Tue, 23 Apr 2024 16:50:26 +0800
Subject: [PATCH] feat(projects): Grayscale mode is added

---
 .../theme-drawer/modules/dark-mode.vue        |  3 +++
 src/store/modules/theme/index.ts              | 23 ++++++++++++++--
 src/store/modules/theme/shared.ts             | 26 +++++++++++--------
 src/styles/css/global.css                     |  4 +++
 src/theme/settings.ts                         |  1 +
 src/typings/app.d.ts                          |  2 ++
 6 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
index 2bf2b683..9b38ad72 100644
--- a/src/layouts/modules/theme-drawer/modules/dark-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -46,6 +46,9 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
         <NSwitch v-model:value="themeStore.sider.inverted" />
       </SettingItem>
     </Transition>
+    <SettingItem label="灰度模式">
+      <NSwitch v-model:value="themeStore.grayscale" />
+    </SettingItem>
   </div>
 </template>
 
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 8947afce..1fde468d 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -5,7 +5,15 @@ import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
 import { getColorPalette } from '@sa/color-palette';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
-import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';
+import {
+  DARK_CLASS,
+  GRAYSCALE_CLASS,
+  addThemeVarsToHtml,
+  createThemeToken,
+  getNaiveTheme,
+  initThemeSettings,
+  toggleThemeMode
+} from './shared';
 
 /** Theme store */
 export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
@@ -23,6 +31,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     return settings.value.themeScheme === 'dark';
   });
 
+  /** grayscale mode */
+  const grayscaleMode = computed(() => settings.value.grayscale);
+
   /** Theme colors */
   const themeColors = computed(() => {
     const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
@@ -125,7 +136,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     watch(
       darkMode,
       val => {
-        toggleCssDarkMode(val);
+        toggleThemeMode(DARK_CLASS, val);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      grayscaleMode,
+      val => {
+        toggleThemeMode(GRAYSCALE_CLASS, val);
       },
       { immediate: true }
     );
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index e755f854..5af9775d 100644
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -5,7 +5,10 @@ import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { localStg } from '@/utils/storage';
 
-const DARK_CLASS = 'dark';
+export const DARK_CLASS = 'dark';
+export const GRAYSCALE_CLASS = 'grayscale';
+
+type ThemeMode = typeof DARK_CLASS | typeof GRAYSCALE_CLASS;
 
 /** Init theme settings */
 export function initThemeSettings() {
@@ -162,23 +165,24 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
 }
 
 /**
- * Toggle css dark mode
+ * Toggle css dark mode or grayscale mode
  *
- * @param darkMode Is dark mode
+ * @param mode DARK_CLASS or GRAYSCALE_CLASS
+ * @param status
  */
-export function toggleCssDarkMode(darkMode = false) {
-  function addDarkClass() {
-    document.documentElement.classList.add(DARK_CLASS);
+export function toggleThemeMode(mode: ThemeMode, status = false) {
+  function addClass() {
+    document.documentElement.classList.add(mode);
   }
 
-  function removeDarkClass() {
-    document.documentElement.classList.remove(DARK_CLASS);
+  function removeClass() {
+    document.documentElement.classList.remove(mode);
   }
 
-  if (darkMode) {
-    addDarkClass();
+  if (status) {
+    addClass();
   } else {
-    removeDarkClass();
+    removeClass();
   }
 }
 
diff --git a/src/styles/css/global.css b/src/styles/css/global.css
index 3121a315..141d4de0 100644
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -11,3 +11,7 @@ body,
 html {
   overflow-x: hidden;
 }
+
+html.grayscale {
+  filter: grayscale(100%);
+}
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index bba9617b..1a1088f3 100644
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -1,6 +1,7 @@
 /** Default theme settings */
 export const themeSettings: App.Theme.ThemeSetting = {
   themeScheme: 'light',
+  grayscale: false,
   themeColor: '#646cff',
   otherColor: {
     info: '#2080f0',
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 13cc492f..ad7ce4ae 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -20,6 +20,8 @@ declare namespace App {
       themeScheme: UnionKey.ThemeScheme;
       /** Theme color */
       themeColor: string;
+      /** grayscale mode */
+      grayscale: boolean;
       /** Other color */
       otherColor: OtherColor;
       /** Whether info color is followed by the primary color */