diff --git a/frontend/src/components/v-charts/components/Pie.vue b/frontend/src/components/v-charts/components/Pie.vue
index c5953fcdf..cd8b7eeca 100644
--- a/frontend/src/components/v-charts/components/Pie.vue
+++ b/frontend/src/components/v-charts/components/Pie.vue
@@ -4,11 +4,8 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
 import echarts from '@/utils/echarts';
-import { useGlobalStore } from '@/composables/useGlobalStore';
-const { themeConfig } = useGlobalStore();
-const isDarkTheme = ref(false);
 const PieChartRef = ref<HTMLElement>();
-let mediaQuery: MediaQueryList;
+let themeObserver: MutationObserver | undefined;
 let resizeObserver: ResizeObserver | undefined;
 let resizeFrame: number | undefined;
 
@@ -47,16 +44,17 @@ function resizeChart() {
     echarts.getInstanceByDom(PieChartRef.value)?.resize();
 }
 function getThemeColors() {
+    // Match the applied page theme, including while settings are still loading.
+    const isDarkTheme = document.documentElement.classList.contains('dark');
+    const style = getComputedStyle(document.documentElement);
     return {
-        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',
-        shadowColor: isDarkTheme.value ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
-        backgroundStyleColor: isDarkTheme.value ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
+        primaryLight2: style.getPropertyValue('--panel-color-primary-light-3').trim() || '#4c8ef1',
+        primaryLight1: style.getPropertyValue('--panel-color-primary').trim() || '#005eeb',
+        pieBgColor: isDarkTheme ? '#434552' : '#ffffff',
+        textColor: isDarkTheme ? '#ffffff' : '#0f0f0f',
+        subtextColor: isDarkTheme ? '#BBBFC4' : '#646A73',
+        shadowColor: isDarkTheme ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
+        backgroundStyleColor: isDarkTheme ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
     };
 }
 
@@ -64,11 +62,6 @@ function initChart() {
     if (!PieChartRef.value) {
         return;
     }
-    if (themeConfig.value.theme === 'auto') {
-        isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    } else {
-        isDarkTheme.value = themeConfig.value.theme === 'dark';
-    }
     let myChart = echarts?.getInstanceByDom(PieChartRef.value);
     if (myChart === null || myChart === undefined) {
         myChart = echarts.init(PieChartRef.value);
@@ -194,8 +187,11 @@ function handleThemeChange() {
 
 onMounted(() => {
     nextTick(() => {
-        mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        mediaQuery.addEventListener('change', handleThemeChange);
+        themeObserver = new MutationObserver(handleThemeChange);
+        themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'style'],
+        });
         initChart();
         window.addEventListener('resize', changeChartSize);
         if (PieChartRef.value) {
@@ -214,7 +210,7 @@ onBeforeUnmount(() => {
         echarts.getInstanceByDom(PieChartRef.value)?.dispose();
     }
     window.removeEventListener('resize', changeChartSize);
-    mediaQuery?.removeEventListener('change', handleThemeChange);
+    themeObserver?.disconnect();
     resizeObserver?.disconnect();
 });
 </script>