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

refactor(projects): combine theme tokens and theme settings. close #379

Browse Source
This commit is contained in:
Soybean
2024-07-20 04:00:32 +08:00
parent 958d0baf3f
commit 1d1b148c8f
7 changed files with 77 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,7 +125,11 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
/** Setup theme vars to html */
function setupThemeVarsToHtml() {
const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
const { themeTokens, darkThemeTokens } = createThemeToken(
themeColors.value,
settings.value.tokens,
settings.value.recommendColor
);
addThemeVarsToHtml(themeTokens, darkThemeTokens);
}

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

@ -30,39 +30,40 @@ export function initThemeSettings() {
}
/**
* Create theme token
* create theme token css vars value by theme settings
*
* @param colors Theme colors
* @param tokens Theme setting tokens
* @param [recommended=false] Use recommended color. Default is `false`
*/
export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
export function createThemeToken(
colors: App.Theme.ThemeColor,
tokens?: App.Theme.ThemeSetting['tokens'],
recommended = false
) {
const paletteColors = createThemePaletteColors(colors, recommended);
const themeTokens: App.Theme.ThemeToken = {
const { light, dark } = tokens || themeSettings.tokens;
const themeTokens: App.Theme.ThemeTokenCSSVars = {
colors: {
...paletteColors,
nprogress: paletteColors.primary,
container: 'rgb(255, 255, 255)',
layout: 'rgb(247, 250, 252)',
inverted: 'rgb(0, 20, 40)',
base_text: 'rgb(31, 31, 31)'
...light.colors
},
boxShadow: {
header: '0 1px 2px rgb(0, 21, 41, 0.08)',
sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
...light.boxShadow
}
};
const darkThemeTokens: App.Theme.ThemeToken = {
const darkThemeTokens: App.Theme.ThemeTokenCSSVars = {
colors: {
...themeTokens.colors,
container: 'rgb(28, 28, 28)',
layout: 'rgb(18, 18, 18)',
base_text: 'rgb(224, 224, 224)'
...dark?.colors
},
boxShadow: {
...themeTokens.boxShadow
...themeTokens.boxShadow,
...dark?.boxShadow
}
};