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 { localStg } from '@/utils/storage';
import {
addThemeVarsToHtml,
addThemeVarsToGlobal,
createThemeToken,
getNaiveTheme,
initThemeSettings,
@ -123,14 +123,14 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
settings.value.layout.mode = mode;
}
/** Setup theme vars to html */
function setupThemeVarsToHtml() {
/** Setup theme vars to global */
function setupThemeVarsToGlobal() {
const { themeTokens, darkThemeTokens } = createThemeToken(
themeColors.value,
settings.value.tokens,
settings.value.recommendColor
);
addThemeVarsToHtml(themeTokens, darkThemeTokens);
addThemeVarsToGlobal(themeTokens, darkThemeTokens);
}
/** Cache theme settings */
@ -170,7 +170,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
watch(
themeColors,
val => {
setupThemeVarsToHtml();
setupThemeVarsToGlobal();
localStg.set('themeColor', val.primary);
},
{ 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
*/
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 darkCssVarStr = getCssVarByTokens(darkTokens);
const css = `
html {
:root {
${cssVarStr}
}
`;