From 3b88337579ada11a98616406472d0327e76bf5c4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 15:08:59 +0200
Subject: [PATCH] refactor: update color modes handling

---
 src/App.vue                             | 28 +++++++++++++++++++++++++
 src/components/AppHeader.vue            |  2 +-
 src/store/index.js                      |  1 +
 src/views/widgets/WidgetsStatsTypeA.vue | 17 +++++++++------
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7502212d..84b32347 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,34 @@
 <template>
   <router-view />
 </template>
+<script>
+import { onBeforeMount } from 'vue'
+import { useStore } from 'vuex'
+import { useColorModes } from '@coreui/vue'
+
+export default {
+  setup() {
+    const { isColorModeSet, setColorMode } = useColorModes(
+      'coreui-free-vue-admin-template-theme',
+    )
+    const store = useStore()
+
+    onBeforeMount(() => {
+      const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+      if (urlParams.get('theme')) {
+        setColorMode(urlParams.get('theme'))
+        return
+      }
+
+      if (isColorModeSet()) {
+        return
+      }
+
+      setColorMode(store.state.theme)
+    })
+  },
+}
+</script>
 
 <style lang="scss">
 // Import Main styles for this application
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 887f838d..7b3d9fb8 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -97,7 +97,7 @@
 </template>
 
 <script>
-import { useColorModes } from '@coreui/vue/'
+import { useColorModes } from '@coreui/vue'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
diff --git a/src/store/index.js b/src/store/index.js
index 57dcaeda..1ca85549 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ export default createStore({
   state: {
     sidebarVisible: '',
     sidebarUnfoldable: false,
+    theme: 'light',
   },
   mutations: {
     toggleSidebar(state) {
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 180a9743..4f663f50 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -386,12 +386,17 @@ export default {
 
     onMounted(() => {
       document.documentElement.addEventListener('ColorSchemeChange', () => {
-        widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
-          getStyle('--cui-primary')
-        widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
-          getStyle('--cui-info')
-        widgetChartRef1.value.chart.update()
-        widgetChartRef2.value.chart.update()
+        if (widgetChartRef1.value) {
+          widgetChartRef1.value.chart.data.datasets[0].pointBackgroundColor =
+            getStyle('--cui-primary')
+          widgetChartRef1.value.chart.update()
+        }
+
+        if (widgetChartRef2.value) {
+          widgetChartRef2.value.chart.data.datasets[0].pointBackgroundColor =
+            getStyle('--cui-info')
+          widgetChartRef2.value.chart.update()
+        }
       })
     })