From a76226fb16e9e4210fb18ba3c45c7d7c1de3c776 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 23:33:29 +0200
Subject: [PATCH] feat: add color modes support

---
 public/index.html                       | 15 ++++--
 src/assets/icons/index.js               |  4 ++
 src/components/AppHeader.vue            | 58 +++++++++++++++++++++
 src/layouts/DefaultLayout.vue           |  2 +-
 src/styles/_example.scss                | 41 ++++++++-------
 src/styles/_variables.scss              |  2 +
 src/styles/style.scss                   | 10 ++--
 src/views/Dashboard.vue                 |  2 +-
 src/views/charts/MainChartExample.vue   | 67 +++++++++++++++++--------
 src/views/widgets/WidgetsStatsTypeA.vue | 26 +++++++++-
 10 files changed, 176 insertions(+), 51 deletions(-)
diff --git a/public/index.html b/public/index.html
index fa900d69..73a19d5b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <!--
-* CoreUI Vue.js Admin Template
+* CoreUI Free Vue.js Admin Template
 * @version v4.2.0
-* @link https://coreui.io/vue/
-* Copyright (c) 2021 creativeLabs Łukasz Holeczek
-* License (https://coreui.io/pro/license)
+* @link https://coreui.io/product/free-vue-admin-template/
+* Copyright (c) 2023 creativeLabs Łukasz Holeczek
+* Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
 -->
 <html>
   <head>
@@ -32,6 +32,13 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
+    <script>
+      const userMode = localStorage.getItem('coreui-free-vue-admin-template-theme');
+	    const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
+				document.documentElement.dataset.coreuiTheme = 'dark';
+			}
+    </script>
   </head>
   <body>
     <noscript>
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index 2c292085..55c6ddf1 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -42,6 +42,7 @@ import {
   cilCheckCircle,
   cilCode,
   cilCommentSquare,
+  cilContrast,
   cilCursor,
   cilDrop,
   cilDollar,
@@ -72,6 +73,7 @@ import {
   cilSpeech,
   cilSpeedometer,
   cilStar,
+  cilSun,
   cilTask,
   cilUser,
   cilUserFemale,
@@ -98,6 +100,7 @@ export const iconsSet = Object.assign(
     cilCheckCircle,
     cilCode,
     cilCommentSquare,
+    cilContrast,
     cilCursor,
     cilDrop,
     cilDollar,
@@ -128,6 +131,7 @@ export const iconsSet = Object.assign(
     cilSpeech,
     cilSpeedometer,
     cilStar,
+    cilSun,
     cilTask,
     cilUser,
     cilUserFemale,
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index e02b6f14..887f838d 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -34,6 +34,58 @@
             <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
           </CNavLink>
         </CNavItem>
+        <li class="nav-item py-2 py-lg-1">
+          <div
+            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
+          ></div>
+          <hr class="d-lg-none my-2 text-white-50" />
+        </li>
+        <CDropdown variant="nav-item" placement="bottom-end">
+          <CDropdownToggle :caret="false">
+            <CIcon v-if="getColorMode() === 'dark'" icon="cil-moon" size="xl" />
+            <CIcon
+              v-else-if="getColorMode() === 'light'"
+              icon="cil-sun"
+              size="xl"
+            />
+            <CIcon v-else icon="cil-contrast" size="xl" />
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem
+              :active="getColorMode() === 'light'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('light')"
+            >
+              <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
+            </CDropdownItem>
+            <CDropdownItem
+              :active="getColorMode() === 'dark'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('dark')"
+            >
+              <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
+            </CDropdownItem>
+            <CDropdownItem
+              :active="getColorMode() === 'auto'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('auto')"
+            >
+              <CIcon class="me-2" icon="cil-contrast" size="lg" /> Auto
+            </CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <li class="nav-item py-2 py-lg-1">
+          <div
+            class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
+          ></div>
+          <hr class="d-lg-none my-2 text-white-50" />
+        </li>
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
@@ -45,6 +97,7 @@
 </template>
 
 <script>
+import { useColorModes } from '@coreui/vue/'
 import AppBreadcrumb from './AppBreadcrumb'
 import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
 import { logo } from '@/assets/brand/logo'
@@ -55,8 +108,13 @@ export default {
     AppHeaderDropdownAccnt,
   },
   setup() {
+    const { getColorMode, setColorMode } = useColorModes(
+      'coreui-free-vue-admin-template-theme',
+    )
     return {
       logo,
+      setColorMode,
+      getColorMode,
     }
   },
 }
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 84aa0e74..b230865d 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <AppSidebar />
-    <div class="wrapper d-flex flex-column min-vh-100 bg-light">
+    <div class="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
       <AppHeader />
       <div class="body flex-grow-1 px-3">
         <CContainer lg>
diff --git a/src/styles/_example.scss b/src/styles/_example.scss
index f8791fb2..fdf64254 100644
--- a/src/styles/_example.scss
+++ b/src/styles/_example.scss
@@ -1,33 +1,23 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
 .example {
   &:not(:first-child) {
     margin-top: 1.5rem;
   }
 
   .tab-content {
-    background-color: $light-50 !important;
-
-    @at-root .dark-theme & {
-      background-color: rgba(255, 255, 255, .1) !important;
-    }
-  }
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    font-size: .875rem !important;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
+    background-color: var(--#{$prefix}tertiary-bg) !important;
   }
 
   & + p {
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
   }
 
   // Components examples
-  .preview,
-  .preview .col {
+  .preview {
     + p {
       margin-top: 2rem;
     }
@@ -105,5 +95,20 @@
       margin-top: .5rem;
       margin-bottom: .5rem;
     }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3ee3142d..697b08ad 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1 +1,3 @@
 // Variable overrides
+//
+// If you want to customize your project please add your variables below.
diff --git a/src/styles/style.scss b/src/styles/style.scss
index ca22ec0d..02f199c4 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -4,14 +4,14 @@
 $enable-ltr: true;
 $enable-rtl: true;
 
-// Import styles
-@import "~@coreui/coreui/scss/coreui";
+// Import CoreUI for React components library
+@import "@coreui/coreui/scss/coreui";
 
-// Import Chart.js Tooltips
-@import "~@coreui/chartjs/scss/tooltips";
+// Import Chart.js custom tooltips styles
+@import "@coreui/chartjs/scss/coreui-chartjs";
 
 @import "layout";
 @import "example";
 
-// If you want to add something do it here
+// If you want to add custom CSS you can put it here.
 @import "custom";
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 508b2956..3959c270 100644
--- a/src/views/Dashboard.vue
+++ b/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" />
diff --git a/src/views/charts/MainChartExample.vue b/src/views/charts/MainChartExample.vue
index 1105749f..de7c83d2 100644
--- a/src/views/charts/MainChartExample.vue
+++ b/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>
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 45e9755d..180a9743 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/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>
