jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): add color fading mode.close #567 (#569)

Browse Source
This commit is contained in:
青菜白玉汤
2024-07-28 23:00:22 +08:00
committed by GitHub
parent 59f07d8ac4
commit 4dde4c22b1
8 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/store/modules/theme/index.ts
View File

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

20
src/store/modules/theme/shared.ts
View File

@ -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';