feat: add color modes support

src/views/Dashboard.vue

@@ -194,7 +194,7 @@
             </CRow>
             <br />
             <CTable align="middle" class="mb-0 border" hover responsive>
-              <CTableHead color="light">
+              <CTableHead class="bg-body-secondary">
                 <CTableRow>
                   <CTableHeaderCell class="text-center">
                     <CIcon name="cil-people" />

src/views/charts/MainChartExample.vue

@@ -1,21 +1,13 @@
 <template>
-  <CChart
-    type="line"
-    :data="data"
-    :options="options"
-    @get-dataset-at-event="aa"
-    @get-element-at-event="aa"
-    @get-elements-at-event="aa"
-  />
+  <CChart type="line" :data="data" :options="options" ref="mainChartRef" />
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
-import { getStyle, hexToRgba } from '@coreui/utils/src'
+import { getStyle } from '@coreui/utils'
 
-function random(min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min)
-}
+const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
 export default {
   name: 'MainChartExample',
@@ -23,12 +15,13 @@ export default {
     CChart,
   },
   setup() {
+    const mainChartRef = ref()
     const data = {
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
       datasets: [
         {
           label: 'My First dataset',
-          backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
+          backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
           borderColor: getStyle('--cui-info'),
           pointHoverBackgroundColor: getStyle('--cui-info'),
           borderWidth: 2,
@@ -81,15 +74,26 @@ export default {
       scales: {
         x: {
           grid: {
+            color: getStyle('--cui-border-color-translucent'),
             drawOnChartArea: false,
           },
+          ticks: {
+            color: getStyle('--cui-body-color'),
+          },
         },
         y: {
+          border: {
+            color: getStyle('--cui-border-color-translucent'),
+          },
+          grid: {
+            color: getStyle('--cui-border-color-translucent'),
+          },
           ticks: {
             beginAtZero: true,
+            color: getStyle('--cui-body-color'),
+            max: 250,
             maxTicksLimit: 5,
             stepSize: Math.ceil(250 / 5),
-            max: 250,
           },
         },
       },
@@ -106,16 +110,39 @@ export default {
       },
     }
 
+    onMounted(() => {
+      document.documentElement.addEventListener('ColorSchemeChange', () => {
+        if (mainChartRef.value) {
+          mainChartRef.value.chart,
+            (options.scales.x.grid.borderColor = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.x.grid.color = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.x.ticks.color = getStyle('--cui-body-color'))
+          mainChartRef.value.chart,
+            (options.scales.y.grid.borderColor = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.y.grid.color = getStyle(
+              '--cui-border-color-translucent',
+            ))
+          mainChartRef.value.chart,
+            (options.scales.y.ticks.color = getStyle('--cui-body-color'))
+          mainChartRef.value.chart.update()
+        }
+      })
+    })
+
     return {
       data,
+      mainChartRef,
       options,
     }
   },
-  methods: {
-    aa(value, value2) {
-      console.log(value)
-      console.log(value2)
-    },
-  },
 }
 </script>

src/views/widgets/WidgetsStatsTypeA.vue

@@ -30,6 +30,7 @@
             type="line"
             class="mt-3 mx-3"
             style="height: 70px"
+            ref="widgetChartRef1"
             :data="{
               labels: [
                 'January',
@@ -45,7 +46,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'transparent',
                   borderColor: 'rgba(255,255,255,.55)',
-                  pointBackgroundColor: '#321fdb',
+                  pointBackgroundColor: getStyle('--cui-primary'),
                   data: [68, 59, 84, 84, 51, 55, 40],
                 },
               ],
@@ -125,6 +126,7 @@
             type="line"
             class="mt-3 mx-3"
             style="height: 70px"
+            ref="widgetChartRef2"
             :data="{
               labels: [
                 'January',
@@ -140,7 +142,7 @@
                   label: 'My First dataset',
                   backgroundColor: 'transparent',
                   borderColor: 'rgba(255,255,255,.55)',
-                  pointBackgroundColor: '#39f',
+                  pointBackgroundColor: getStyle('--cui-info'),
                   data: [1, 18, 9, 17, 34, 22, 11],
                 },
               ],
@@ -369,11 +371,31 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import { CChart } from '@coreui/vue-chartjs'
+import { getStyle } from '@coreui/utils'
+
 export default {
   name: 'WidgetsStatsA',
   components: {
     CChart,
   },
+  setup() {
+    const widgetChartRef1 = ref()
+    const widgetChartRef2 = ref()
+
+    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()
+      })
+    })
+
+    return { getStyle, widgetChartRef1, widgetChartRef2 }
+  },
 }
 </script>