diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 5163434..74ca9d8 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -94,12 +94,7 @@ const formatCurrency = (value) => {
     return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
 };
 
-watch(isDarkTheme, () => {
-    chartData.value = setChartData();
-    chartOptions.value = setChartOptions();
-});
-
-watch([getPrimary, getSurface], () => {
+watch([getPrimary, getSurface, isDarkTheme], () => {
     chartData.value = setChartData();
     chartOptions.value = setChartOptions();
 });
diff --git a/src/views/uikit/ChartDoc.vue b/src/views/uikit/ChartDoc.vue
index fb9ac14..d0adf90 100644
--- a/src/views/uikit/ChartDoc.vue
+++ b/src/views/uikit/ChartDoc.vue
@@ -1,33 +1,29 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
-import { ref, watch } from 'vue';
-
-const { layoutConfig } = useLayout();
-let documentStyle = getComputedStyle(document.documentElement);
-let textColor = documentStyle.getPropertyValue('--text-color');
-let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
-let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+import { onMounted, ref, watch } from 'vue';
 
+const { getPrimary, getSurface, isDarkTheme } = useLayout();
 const lineData = ref(null);
 const pieData = ref(null);
 const polarData = ref(null);
 const barData = ref(null);
 const radarData = ref(null);
-
 const lineOptions = ref(null);
 const pieOptions = ref(null);
 const polarOptions = ref(null);
 const barOptions = ref(null);
 const radarOptions = ref(null);
 
-const setColorOptions = () => {
-    documentStyle = getComputedStyle(document.documentElement);
-    textColor = documentStyle.getPropertyValue('--text-color');
-    textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
-    surfaceBorder = documentStyle.getPropertyValue('--surface-border');
-};
+onMounted(() => {
+    setColorOptions();
+});
+
+const setColorOptions = () => {
+    const documentStyle = getComputedStyle(document.documentElement);
+    const textColor = documentStyle.getPropertyValue('--text-color');
+    const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+    const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 
-const setChart = () => {
     barData.value = {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         datasets: [
@@ -223,19 +219,9 @@ const setChart = () => {
 };
 
 watch(
-    layoutConfig.primary,
+    [getPrimary, getSurface, isDarkTheme],
     () => {
         setColorOptions();
-        setChart();
-    },
-    { immediate: true }
-);
-
-watch(
-    layoutConfig.darkTheme,
-    () => {
-        setColorOptions();
-        setChart();
     },
     { immediate: true }
 );