1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-11-08 02:36:01 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Fix the issue of homepage color after switching themes (#9041)

Browse source
This commit is contained in:
蘭 2025-06-12 18:54:39 +08:00 • committed by GitHub
parent c289a5f14f
commit 3b166801d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/v-charts/components/Line.vue
View file

@ -38,11 +38,13 @@ const seriesStyle = [
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: isDarkTheme.value ? '#3d8eff' : '#005eeb',
color: getComputedStyle(document.documentElement)
.getPropertyValue('--panel-color-primary-light-9')
.trim(),
},
{
offset: 1,
color: isDarkTheme.value ? '#3364ad' : '#4c8ef1',
color: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
},
]),
},
@ -253,16 +255,17 @@ function handleThemeChange() {
onMounted(() => {
nextTick(() => {
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
initChart();
window.addEventListener('resize', changeChartSize);
});
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
});
onBeforeUnmount(() => {
echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose();
window.removeEventListener('resize', changeChartSize);
mediaQuery.removeEventListener('change', handleThemeChange);
});
</script>
<style lang="scss" scoped></style>

11
frontend/src/components/v-charts/components/Pie.vue
View file

@ -32,8 +32,10 @@ function changeChartSize() {
}
function getThemeColors() {
return {
primaryLight2: isDarkTheme.value ? '#3364ad' : '#4c8ef1',
primaryLight1: isDarkTheme.value ? '#3d8eff' : '#005eeb',
primaryLight2: getComputedStyle(document.documentElement)
.getPropertyValue('--panel-color-primary-light-3')
.trim(),
primaryLight1: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
pieBgColor: isDarkTheme.value ? '#434552' : '#ffffff',
textColor: isDarkTheme.value ? '#ffffff' : '#0f0f0f',
subtextColor: isDarkTheme.value ? '#BBBFC4' : '#646A73',
@ -174,16 +176,17 @@ function handleThemeChange() {
onMounted(() => {
nextTick(() => {
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
initChart();
window.addEventListener('resize', changeChartSize);
});
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
});
onBeforeUnmount(() => {
echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose();
window.removeEventListener('resize', changeChartSize);
mediaQuery.removeEventListener('change', handleThemeChange);
});
</script>
<style lang="scss" scoped></style>