1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-11-09 19:20:56 +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, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: isDarkTheme.value ? '#3d8eff' : '#005eeb', color: getComputedStyle(document.documentElement)
.getPropertyValue('--panel-color-primary-light-9')
.trim(),
}, },
{ {
offset: 1, offset: 1,
color: isDarkTheme.value ? '#3364ad' : '#4c8ef1', color: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
}, },
]), ]),
}, },
@ -253,16 +255,17 @@ function handleThemeChange() {
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
initChart(); initChart();
window.addEventListener('resize', changeChartSize); window.addEventListener('resize', changeChartSize);
}); });
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose(); echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose();
window.removeEventListener('resize', changeChartSize); window.removeEventListener('resize', changeChartSize);
mediaQuery.removeEventListener('change', handleThemeChange);
}); });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

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

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