feat(projects): add color fading mode

src/layouts/modules/theme-drawer/modules/dark-mode.vue

@@ -45,6 +45,10 @@ type CheckedType = boolean | string | number;
 function handleGrayscaleChange(value: CheckedType) {
   themeStore.setGrayscale(value as boolean);
 }
+
+function handleColourWeaknessChange(value: CheckedType) {
+  themeStore.setColourWeakness(value as boolean);
+}
 </script>
 
 <template>
@@ -67,6 +71,9 @@ function handleGrayscaleChange(value: CheckedType) {
     <SettingItem :label="$t('theme.grayscale')">
       <ASwitch :checked="themeStore.grayscale" @update:checked="handleGrayscaleChange" />
     </SettingItem>
+    <SettingItem :label="$t('theme.colourWeakness')">
+      <ASwitch :checked="themeStore.colourWeakness" @update:checked="handleColourWeaknessChange" />
+    </SettingItem>
   </div>
 </template>
 

src/locales/langs/en-us.ts

@@ -63,6 +63,7 @@ const local: App.I18n.Schema = {
       auto: 'Follow System'
     },
     grayscale: 'Grayscale',
+    colourWeakness: 'Colour Weakness',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',

src/locales/langs/zh-cn.ts

@@ -63,6 +63,7 @@ const local: App.I18n.Schema = {
       auto: '跟随系统'
     },
     grayscale: '灰色模式',
+    colourWeakness: '色弱模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',

src/store/modules/theme/index.ts

@@ -10,8 +10,8 @@ import {
   createThemeToken,
   getAntdTheme,
   initThemeSettings,
-  toggleCssDarkMode,
-  toggleGrayscaleMode
+  toggleAuxiliaryColorModes,
+  toggleCssDarkMode
 } from './shared';
 
 /** Theme store */
@@ -51,6 +51,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   /** grayscale mode */
   const grayscaleMode = computed(() => settings.value.grayscale);
 
+  /** colourWeakness mode */
+  const colourWeaknessMode = computed(() => settings.value.colourWeakness);
+
   /** Antd theme */
   const antdTheme = computed(() => getAntdTheme(themeColors.value, darkMode.value));
 
@@ -79,6 +82,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.grayscale = isGrayscale;
   }
 
+  /**
+   * Set colourWeakness value
+   *
+   * @param isColourWeakness
+   */
+  function setColourWeakness(isColourWeakness: boolean) {
+    settings.value.colourWeakness = isColourWeakness;
+  }
+
   /** Toggle theme scheme */
   function toggleThemeScheme() {
     const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -168,9 +180,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     );
 
     watch(
-      grayscaleMode,
+      [grayscaleMode, colourWeaknessMode],
       val => {
-        toggleGrayscaleMode(val);
+        toggleAuxiliaryColorModes(val[0], val[1]);
       },
       { immediate: true }
     );
@@ -198,6 +210,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     antdTheme,
     settingsJson,
     setGrayscale,
+    setColourWeakness,
     resetStore,
     toggleThemeScheme,
     setThemeScheme,

src/store/modules/theme/shared.ts

@@ -182,20 +182,16 @@ export function toggleCssDarkMode(darkMode = false) {
 }
 
 /**
- * Toggle grayscale mode
+ * Toggle auxiliary color modes
  *
- * @param grayscaleMode Is grayscale mode
+ * @param grayscaleMode
+ * @param colourWeakness
  */
-export function toggleGrayscaleMode(grayscaleMode = false) {
-  const GRAYSCALE_CLASS = 'grayscale';
-
-  const { add, remove } = toggleHtmlClass(GRAYSCALE_CLASS);
-
-  if (grayscaleMode) {
-    add();
-  } else {
-    remove();
-  }
+export function toggleAuxiliaryColorModes(grayscaleMode = false, colourWeakness = false) {
+  const htmlElement = document.documentElement;
+  htmlElement.style.filter = [grayscaleMode ? 'grayscale(100%)' : '', colourWeakness ? 'invert(80%)' : '']
+    .filter(Boolean)
+    .join(' ');
 }
 
 /**

src/styles/css/global.css

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

src/theme/settings.ts

@@ -2,6 +2,7 @@
 export const themeSettings: App.Theme.ThemeSetting = {
   themeScheme: 'light',
   grayscale: false,
+  colourWeakness: false,
   recommendColor: false,
   themeColor: '#646cff',
   otherColor: {

src/typings/app.d.ts

@@ -8,12 +8,14 @@ declare namespace App {
     interface ThemeSetting {
       /** Theme scheme */
       themeScheme: UnionKey.ThemeScheme;
+      /** grayscale mode */
+      grayscale: boolean;
+      /** colour weakness mode */
+      colourWeakness: boolean;
       /** Whether to recommend color */
       recommendColor: boolean;
       /** Theme color */
       themeColor: string;
-      /** grayscale mode */
-      grayscale: boolean;
       /** Other color */
       otherColor: OtherColor;
       /** Whether info color is followed by the primary color */
@@ -328,6 +330,7 @@ declare namespace App {
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
         grayscale: string;
+        colourWeakness: string;
         layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
         recommendColor: string;
         recommendColorDesc: string;