diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index d914f1175..0b1b7c289 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -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>
diff --git a/frontend/src/components/v-charts/components/Pie.vue b/frontend/src/components/v-charts/components/Pie.vue
index e29fc320c..b86be432a 100644
--- a/frontend/src/components/v-charts/components/Pie.vue
+++ b/frontend/src/components/v-charts/components/Pie.vue
@@ -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>