GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(projects): change css vars mount to root

Browse Source
This commit is contained in:
Soybean 2024-07-20 04:05:24 +08:00
parent 1d1b148c8f
commit 00f41dd25e
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { getPaletteColorByNumber } from '@sa/color';
import { SetupStoreId } from '@/enum'; import { SetupStoreId } from '@/enum';
import { localStg } from '@/utils/storage'; import { localStg } from '@/utils/storage';
import { import {
addThemeVarsToHtml, addThemeVarsToGlobal,
createThemeToken, createThemeToken,
getNaiveTheme, getNaiveTheme,
initThemeSettings, initThemeSettings,
@ -123,14 +123,14 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
settings.value.layout.mode = mode; settings.value.layout.mode = mode;
} }
/** Setup theme vars to html */ /** Setup theme vars to global */
function setupThemeVarsToHtml() { function setupThemeVarsToGlobal() {
const { themeTokens, darkThemeTokens } = createThemeToken( const { themeTokens, darkThemeTokens } = createThemeToken(
themeColors.value, themeColors.value,
settings.value.tokens, settings.value.tokens,
settings.value.recommendColor settings.value.recommendColor
); );
addThemeVarsToHtml(themeTokens, darkThemeTokens); addThemeVarsToGlobal(themeTokens, darkThemeTokens);
} }
/** Cache theme settings */ /** Cache theme settings */
@ -170,7 +170,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
watch( watch(
themeColors, themeColors,
val => { val => {
setupThemeVarsToHtml(); setupThemeVarsToGlobal();
localStg.set('themeColor', val.primary); localStg.set('themeColor', val.primary);
}, },
{ immediate: true } { immediate: true }

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

@ -133,16 +133,16 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
} }
/** /**
* Add theme vars to html * Add theme vars to global
* *
* @param tokens * @param tokens
*/ */
export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) { export function addThemeVarsToGlobal(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
const cssVarStr = getCssVarByTokens(tokens); const cssVarStr = getCssVarByTokens(tokens);
const darkCssVarStr = getCssVarByTokens(darkTokens); const darkCssVarStr = getCssVarByTokens(darkTokens);
const css = ` const css = `
html { :root {
${cssVarStr} ${cssVarStr}
} }
`; `;