feat(projects): Grayscale mode is added

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>
 

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 }
     );

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) {
+export function toggleThemeMode(mode: ThemeMode, status = false) {
-  function addDarkClass() {
+  function addClass() {
-    document.documentElement.classList.add(DARK_CLASS);
+    document.documentElement.classList.add(mode);
   }
 
-  function removeDarkClass() {
+  function removeClass() {
-    document.documentElement.classList.remove(DARK_CLASS);
+    document.documentElement.classList.remove(mode);
   }
 
-  if (darkMode) {
+  if (status) {
-    addDarkClass();
+    addClass();
   } else {
-    removeDarkClass();
+    removeClass();
   }
 }
 

src/styles/css/global.css

@@ -11,3 +11,7 @@ body,
 html {
   overflow-x: hidden;
 }
+
+html.grayscale {
+  filter: grayscale(100%);
+}

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',

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 */