Merge pull request #393 from Li-0221/v1.1.0

soybeanjs · Apr 24, 2024 · 319718d · 319718d
2 parents 0d45b86 + f2757d4
commit 319718d
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 14 deletions.
diff --git a/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -21,6 +21,10 @@ function handleSegmentChange(value: string | number) {
   themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
 }
 
+function handleGrayscaleChange(value: boolean) {
+  themeStore.setGrayscale(value);
+}
+
 const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
 </script>
 
@@ -46,6 +50,9 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
         <NSwitch v-model:value="themeStore.sider.inverted" />
       </SettingItem>
     </Transition>
+    <SettingItem :label="$t('theme.grayscale')">
+      <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
+    </SettingItem>
   </div>
 </template>
 

diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
@@ -57,6 +57,7 @@ const local: App.I18n.Schema = {
       dark: 'Dark',
       auto: 'Follow System'
     },
+    grayscale: 'Grayscale',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',

diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
@@ -57,6 +57,7 @@ const local: App.I18n.Schema = {
       dark: '暗黑模式',
       auto: '跟随系统'
     },
+    grayscale: '灰度模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',

diff --git 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;
@@ -60,6 +71,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.themeScheme = themeScheme;
   }
 
+  /**
+   * Set grayscale value
+   *
+   * @param isGrayscale
+   */
+  function setGrayscale(isGrayscale: boolean) {
+    settings.value.grayscale = isGrayscale;
+  }
+
   /** Toggle theme scheme */
   function toggleThemeScheme() {
     const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -125,7 +145,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 }
     );
@@ -135,7 +163,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       themeColors,
       val => {
         setupThemeVarsToHtml();
-
         localStg.set('themeColor', val.primary);
       },
       { immediate: true }
@@ -153,6 +180,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     themeColors,
     naiveTheme,
     settingsJson,
+    setGrayscale,
     resetStore,
     setThemeScheme,
     toggleThemeScheme,

diff --git 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
@@ -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
@@ -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
@@ -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 */
@@ -298,6 +300,7 @@ declare namespace App {
       };
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
+        grayscale: string;
         layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
         themeColor: {
           title: string;

diff --git a/src/typings/union-key.d.ts b/src/typings/union-key.d.ts
@@ -14,6 +14,9 @@ declare namespace UnionKey {
   /** Theme scheme */
   type ThemeScheme = 'light' | 'dark' | 'auto';
 
+  /** Grayscale mode */
+  type Grayscale = 'grayscale';
+
   /**
    * The layout mode
    *