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

fix(projects): fix app loading theme color

Browse Source
This commit is contained in:
Soybean 2024-01-18 02:43:07 +08:00
parent b30c0359f6
commit 0ba19d5479
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/common/app-loading.vue
View File

@ -10,20 +10,21 @@ const loadingClasses = [
'right-0 bottom-0 animate-delay-1500'
];
const style = addThemeColorCssVars();
function addThemeColorCssVars() {
const themeColor = localStg.get('themeColor') || '#646cff';
const { r, g, b } = getRgbOfColor(themeColor);
const cssVars = `--primary-color: ${r} ${g} ${b}`;
document.documentElement.style.cssText = cssVars;
}
addThemeColorCssVars();
return cssVars;
}
</script>
<template>
<div class="fixed-center flex-col">
<div class="fixed-center flex-col" :style="style">
<SystemLogo class="text-128px text-primary" />
<div class="w-56px h-56px my-36px">
<div class="relative h-full animate-spin">

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

@ -126,11 +126,13 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
{ immediate: true }
);
// themeColors change, update css vars
// themeColors change, update css vars and storage theme color
watch(
themeColors,
() => {
val => {
setupThemeVarsToHtml();
localStg.set('themeColor', val.primary);
},
{ immediate: true }
);