From e8c9384c8df7caf5091e72d532b1b7626e648b44 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 29 Mar 2024 10:44:47 +0300
Subject: [PATCH] Add new theme-palette-change event

---
 components/landing/HeroSection.vue | 18 ++++++++++++------
 doc/chart/BasicDoc.vue             | 10 ++++++----
 doc/chart/ComboDoc.vue             | 10 ++++++----
 doc/chart/DoughnutDoc.vue          | 10 ++++++----
 doc/chart/HorizontalBarDoc.vue     | 10 ++++++----
 doc/chart/LineDoc.vue              | 10 ++++++----
 doc/chart/LineStylesDoc.vue        | 10 ++++++----
 doc/chart/MultiAxisDoc.vue         | 10 ++++++----
 doc/chart/PieChartDoc.vue          | 10 ++++++----
 doc/chart/PolarAreaDoc.vue         | 10 ++++++----
 doc/chart/RadarDoc.vue             | 10 ++++++----
 doc/chart/StackedBarDoc.vue        | 10 ++++++----
 doc/chart/VerticalBarDoc.vue       | 10 ++++++----
 layouts/AppConfigurator.vue        |  5 ++++-
 14 files changed, 88 insertions(+), 55 deletions(-)

diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index 7de204162..a97b42682 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -165,7 +165,7 @@ import EventBus from '@/layouts/AppEventBus';
 import { NodeService } from '@/service/NodeService';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             value1: 24,
@@ -212,17 +212,20 @@ export default {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
+            this.chartData = this.setChartData();
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
 
         NodeService.getTreeNodes().then((data) => (this.nodes = data));
     },
@@ -231,6 +234,9 @@ export default {
             this.category = category;
         },
         setChartData() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const primaryColor = documentStyle.getPropertyValue('--primary-color');
+
             return {
                 labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                 datasets: [
@@ -238,9 +244,9 @@ export default {
                         label: 'Annual Income',
                         data: [40, 59, 40, 50, 56],
                         fill: true,
-                        borderColor: '#10b981',
+                        borderColor: primaryColor,
                         tension: 0.4,
-                        backgroundColor: 'rgba(16, 185, 129, .2)'
+                        backgroundColor: `color-mix(in srgb, ${primaryColor}, transparent 80%)`
                     }
                 ]
             };
diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue
index 526a90a54..5b547d911 100644
--- a/doc/chart/BasicDoc.vue
+++ b/doc/chart/BasicDoc.vue
@@ -15,7 +15,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -170,17 +170,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue
index 1cd4b080b..80b3c494f 100644
--- a/doc/chart/ComboDoc.vue
+++ b/doc/chart/ComboDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -205,17 +205,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue
index eb15a891a..31ae088ea 100644
--- a/doc/chart/DoughnutDoc.vue
+++ b/doc/chart/DoughnutDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -130,17 +130,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue
index 7e8aab7fe..242320133 100644
--- a/doc/chart/HorizontalBarDoc.vue
+++ b/doc/chart/HorizontalBarDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -195,17 +195,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue
index 5ccd392a2..8b966d084 100644
--- a/doc/chart/LineDoc.vue
+++ b/doc/chart/LineDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -187,17 +187,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue
index 0704d8585..89e3b0578 100644
--- a/doc/chart/LineStylesDoc.vue
+++ b/doc/chart/LineStylesDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -205,17 +205,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue
index f7ad85e00..7766cd31e 100644
--- a/doc/chart/MultiAxisDoc.vue
+++ b/doc/chart/MultiAxisDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -223,17 +223,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue
index 171b3234b..cb3243f5e 100644
--- a/doc/chart/PieChartDoc.vue
+++ b/doc/chart/PieChartDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -128,17 +128,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue
index d8c13c19b..33fc97f45 100644
--- a/doc/chart/PolarAreaDoc.vue
+++ b/doc/chart/PolarAreaDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -153,17 +153,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue
index 3cccec8c6..40ae33589 100644
--- a/doc/chart/RadarDoc.vue
+++ b/doc/chart/RadarDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -169,17 +169,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue
index a061abcba..7d110d024 100644
--- a/doc/chart/StackedBarDoc.vue
+++ b/doc/chart/StackedBarDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -207,17 +207,19 @@ const setChartOptions = () =>  {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue
index 0b03fc266..03938ae02 100644
--- a/doc/chart/VerticalBarDoc.vue
+++ b/doc/chart/VerticalBarDoc.vue
@@ -12,7 +12,7 @@
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
-    darkModeToggleListener: null,
+    redrawListener: null,
     data() {
         return {
             chartData: null,
@@ -193,17 +193,19 @@ const setChartOptions = () => {
         };
     },
     beforeUnmount() {
-        EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.off('dark-mode-toggle-complete', this.redrawListener);
+        EventBus.off('theme-palette-change', this.redrawListener);
     },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
 
-        this.darkModeToggleListener = () => {
+        this.redrawListener = () => {
             this.chartOptions = this.setChartOptions();
         };
 
-        EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener);
+        EventBus.on('theme-palette-change', this.redrawListener);
+        EventBus.on('dark-mode-toggle-complete', this.redrawListener);
     },
     methods: {
         setChartData() {
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 8e5456270..c98fc8955 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -38,6 +38,7 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
 import { updatePreset, updateSurface } from 'primevue/themes';
 
 export default {
@@ -94,7 +95,7 @@ export default {
             else if (type === 'surface') this.selectedSurfaceColor = color.name;
 
             if (!document.startViewTransition) {
-                this.applyTheme(color);
+                this.applyTheme(type, color);
 
                 return;
             }
@@ -179,6 +180,8 @@ export default {
             } else if (type === 'surface') {
                 updateSurface(color.palette);
             }
+
+            EventBus.emit('theme-palette-change');
         },
         onRippleChange(value) {
             this.$appState.ripple = value;