refactor: update color modes handling

Author: mrholek

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

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'

src/store/index.js

@@ -4,6 +4,7 @@ export default createStore({
   state: {
     sidebarVisible: '',
     sidebarUnfoldable: false,
+    theme: 'light',
   },
   mutations: {
     toggleSidebar(state) {

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()
+        }
       })
     })