From 4dde4c22b1beddb81bb3543e323ddd06b6aee595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=92=E8=8F=9C=E7=99=BD=E7=8E=89=E6=B1=A4?=
<79054161+Azir-11@users.noreply.github.com>
Date: Sun, 28 Jul 2024 23:00:22 +0800
Subject: [PATCH] feat(projects): add color fading mode.close #567 (#569)
---
.../theme-drawer/modules/dark-mode.vue | 7 +++++++
src/locales/langs/en-us.ts | 1 +
src/locales/langs/zh-cn.ts | 1 +
src/store/modules/theme/index.ts | 21 +++++++++++++++----
src/store/modules/theme/shared.ts | 20 +++++++-----------
src/styles/css/global.css | 4 ----
src/theme/settings.ts | 1 +
src/typings/app.d.ts | 3 +++
8 files changed, 38 insertions(+), 20 deletions(-)
diff --git a/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
index f5bcebf4..f66e495e 100644
--- a/src/layouts/modules/theme-drawer/modules/dark-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -25,6 +25,10 @@ function handleGrayscaleChange(value: boolean) {
themeStore.setGrayscale(value);
}
+function handleColourWeaknessChange(value: boolean) {
+ themeStore.setColourWeakness(value);
+}
+
const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
@@ -53,6 +57,9 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
+
+
+
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 917f5ad4..26441217 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -65,6 +65,7 @@ const local: App.I18n.Schema = {
auto: 'Follow System'
},
grayscale: 'Grayscale',
+ colourWeakness: 'Colour Weakness',
layoutMode: {
title: 'Layout Mode',
vertical: 'Vertical Menu Mode',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index a19033ae..95f1e665 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -65,6 +65,7 @@ const local: App.I18n.Schema = {
auto: '跟随系统'
},
grayscale: '灰色模式',
+ colourWeakness: '色弱模式',
layoutMode: {
title: '布局模式',
vertical: '左侧菜单模式',
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 0812638d..a1a39a01 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -10,8 +10,8 @@ import {
createThemeToken,
getNaiveTheme,
initThemeSettings,
- toggleCssDarkMode,
- toggleGrayscaleMode
+ toggleAuxiliaryColorModes,
+ toggleCssDarkMode
} from './shared';
/** Theme store */
@@ -33,6 +33,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
/** grayscale mode */
const grayscaleMode = computed(() => settings.value.grayscale);
+ /** colourWeakness mode */
+ const colourWeaknessMode = computed(() => settings.value.colourWeakness);
+
/** Theme colors */
const themeColors = computed(() => {
const { themeColor, otherColor, isInfoFollowPrimary } = settings.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'];
@@ -167,9 +179,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
);
watch(
- grayscaleMode,
+ [grayscaleMode, colourWeaknessMode],
val => {
- toggleGrayscaleMode(val);
+ toggleAuxiliaryColorModes(val[0], val[1]);
},
{ immediate: true }
);
@@ -197,6 +209,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
naiveTheme,
settingsJson,
setGrayscale,
+ setColourWeakness,
resetStore,
setThemeScheme,
toggleThemeScheme,
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index 31d0c7d8..448c6992 100644
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -180,20 +180,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(' ');
}
type NaiveColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';
diff --git a/src/styles/css/global.css b/src/styles/css/global.css
index 141d4de0..3121a315 100644
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -11,7 +11,3 @@ body,
html {
overflow-x: hidden;
}
-
-html.grayscale {
- filter: grayscale(100%);
-}
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index be92e1e8..74c1c885 100644
--- a/src/theme/settings.ts
+++ b/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: {
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index c455caeb..728a2c7f 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -10,6 +10,8 @@ declare namespace App {
themeScheme: UnionKey.ThemeScheme;
/** grayscale mode */
grayscale: boolean;
+ /** colour weakness mode */
+ colourWeakness: boolean;
/** Whether to recommend color */
recommendColor: boolean;
/** Theme color */
@@ -332,6 +334,7 @@ declare namespace App {
theme: {
themeSchema: { title: string } & Record;
grayscale: string;
+ colourWeakness: string;
layoutMode: { title: string; reverseHorizontalMix: string } & Record;
recommendColor: string;
recommendColorDesc: string;