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' 'right-0 bottom-0 animate-delay-1500'
]; ];
const style = addThemeColorCssVars();
function addThemeColorCssVars() { function addThemeColorCssVars() {
const themeColor = localStg.get('themeColor') || '#646cff'; const themeColor = localStg.get('themeColor') || '#646cff';
const { r, g, b } = getRgbOfColor(themeColor); const { r, g, b } = getRgbOfColor(themeColor);
const cssVars = `--primary-color: ${r} ${g} ${b}`; const cssVars = `--primary-color: ${r} ${g} ${b}`;
document.documentElement.style.cssText = cssVars;
}
addThemeColorCssVars(); return cssVars;
}
</script> </script>
<template> <template>
<div class="fixed-center flex-col"> <div class="fixed-center flex-col" :style="style">
<SystemLogo class="text-128px text-primary" /> <SystemLogo class="text-128px text-primary" />
<div class="w-56px h-56px my-36px"> <div class="w-56px h-56px my-36px">
<div class="relative h-full animate-spin"> <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 } { immediate: true }
); );
// themeColors change, update css vars // themeColors change, update css vars and storage theme color
watch( watch(
themeColors, themeColors,
() => { val => {
setupThemeVarsToHtml(); setupThemeVarsToHtml();
localStg.set('themeColor', val.primary);
}, },
{ immediate: true } { immediate: true }
); );