add dark mode in dashboard stats & chart

resources/scripts/admin/components/charts/LineChart.vue

@@ -6,8 +6,17 @@
 
 <script setup>
 import Chart from 'chart.js'
-import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  watchEffect,
+  inject,
+  watch,
+} from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
 
 const utils = inject('utils')
 
@@ -44,9 +53,11 @@ const props = defineProps({
   },
 })
 
+const isDarkModeOn = document.documentElement.classList.contains('dark')
 let myLineChart = null
 const graph = ref(null)
 const companyStore = useCompanyStore()
+const globalStore = useGlobalStore()
 const defaultCurrency = computed(() => {
   return companyStore.selectedCompanyCurrency
 })
@@ -60,6 +71,14 @@ watchEffect(() => {
   }
 })
 
+watch(
+  () => globalStore.isDarkModeOn,
+  () => {
+    myLineChart.reset()
+    updateColors()
+  }
+)
+
 onMounted(() => {
   let context = graph.value.getContext('2d')
   let options = reactive({
@@ -81,6 +100,8 @@ onMounted(() => {
     },
   })
 
+  const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
+
   let data = reactive({
     labels: props.labels,
     datasets: [
@@ -89,16 +110,16 @@ onMounted(() => {
         fill: false,
         lineTension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: '#040405',
+        borderColor: salesColor,
         borderCapStyle: 'butt',
         borderDash: [],
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
-        pointBorderColor: '#040405',
+        pointBorderColor: salesColor,
         pointBackgroundColor: '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
-        pointHoverBackgroundColor: '#040405',
+        pointHoverBackgroundColor: salesColor,
         pointHoverBorderColor: 'rgba(220,220,220,1)',
         pointHoverBorderWidth: 2,
         pointRadius: 4,
@@ -194,4 +215,12 @@ function update() {
     lazy: true,
   })
 }
+
+function updateColors() {
+  const newColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
+
+  myLineChart.data.datasets[0].borderColor = newColor
+  myLineChart.data.datasets[0].pointBorderColor = newColor
+  myLineChart.data.datasets[0].pointHoverBackgroundColor = newColor
+}
 </script>

resources/scripts/admin/views/dashboard/DashboardChart.vue

@@ -2,19 +2,12 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+      class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:text-white dark:backdrop-blur-xl dark:shadow-glass dark:border dark:bg-opacity-70 dark:border-white/10 dark:bg-gray-800 relative"
     >
+      <BaseDarkHighlight />
       <!-- Chart -->
       <div
-        class="
-          grid grid-cols-1
-          col-span-10
-          px-4
-          py-5
-          lg:col-span-7
-          xl:col-span-8
-          sm:p-6
-        "
+        class="grid grid-cols-1 col-span-10 px-4 py-5 lg:col-span-7 xl:col-span-8 sm:p-6"
       >
         <div class="flex justify-between mt-1 mb-4 flex-col md:flex-row">
           <h6 class="flex items-center sw-section-title h-10">
@@ -46,15 +39,7 @@
 
       <!-- Chart Labels -->
       <div
-        class="
-          grid grid-cols-3
-          col-span-10
-          text-center
-          border-t border-l border-gray-200 border-solid
-          lg:border-t-0 lg:text-right lg:col-span-3
-          xl:col-span-2
-          lg:grid-cols-1
-        "
+        class="grid grid-cols-3 col-span-10 text-center border-t border-l border-gray-200 border-solid lg:border-t-0 lg:text-right lg:col-span-3 xl:col-span-2 lg:grid-cols-1 dark:border-white/10"
       >
         <div class="p-6">
           <span class="text-xs leading-5 lg:text-sm">
@@ -74,15 +59,7 @@
           </span>
           <br />
           <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-green-400
-            "
+            class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-green-400"
           >
             <BaseFormatMoney
               :amount="dashboardStore.totalReceipts"
@@ -96,15 +73,7 @@
           </span>
           <br />
           <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-red-400
-            "
+            class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-red-400"
           >
             <BaseFormatMoney
               :amount="dashboardStore.totalExpenses"
@@ -113,27 +82,14 @@
           </span>
         </div>
         <div
-          class="
-            col-span-3
-            p-6
-            border-t border-gray-200 border-solid
-            lg:col-span-1
-          "
+          class="col-span-3 p-6 border-t border-gray-200 border-solid lg:col-span-1 dark:border-white/10"
         >
           <span class="text-xs leading-5 lg:text-sm">
             {{ $t('dashboard.chart_info.net_income') }}
           </span>
           <br />
           <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-primary-500
-            "
+            class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-primary-500 dark:text-primary-400"
           >
             <BaseFormatMoney
               :amount="dashboardStore.totalNetIncome"

resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseContentPlaceholders
-    class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+    class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:bg-gray-800"
   >
     <!-- Chart -->
     <div
@@ -29,6 +29,7 @@
         text-center
         border-t border-l border-gray-200 border-solid
         lg:border-t-0 lg:text-right lg:col-span-3
+        dark:border-gray-600
         xl:col-span-2
         lg:grid-cols-1
       "
@@ -77,6 +78,7 @@
           col-span-3
           p-6
           border-t border-gray-200 border-solid
+          dark:border-gray-600
           lg:justify-end lg:items-end lg:col-span-1
         "
       >

resources/scripts/admin/views/dashboard/DashboardStatsItem.vue

@@ -12,18 +12,24 @@
       hover:bg-gray-50
       xl:p-4
       lg:col-span-2
+      dark:backdrop-blur-xl
+      dark:shadow-glass
+      dark:border
+      dark:border-white/10
+      dark:bg-gray-800/70
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
         {{ label }}
       </span>
     </div>
+    <BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
     <div class="flex items-center">
       <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
     </div>

resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
   >
     <div>
       <BaseContentPlaceholdersText

resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue

@@ -12,6 +12,7 @@
       shadow
       lg:col-span-2
       xl:p-4
+      dark:bg-gray-800
     "
   >
     <div>