From a2cdbbc833a87117cbd5757dc864b8ba4c93b7bc Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 13 May 2020 15:25:03 +0300
Subject: [PATCH] Dark theme support for charts

---
 src/App.vue                            |   9 ++
 src/AppConfigurator.vue                |  46 +++----
 src/AppTopBar.vue                      |  28 ++--
 src/EventBus.js                        |   3 +
 src/views/chart/BarChartDemo.vue       | 179 +++++++++++++++++++++++--
 src/views/chart/BarChartDoc.vue        |  22 +--
 src/views/chart/ComboChartDemo.vue     |  72 +++++++++-
 src/views/chart/ComboChartDoc.vue      |   6 +-
 src/views/chart/DoughnutChartDemo.vue  |  35 ++++-
 src/views/chart/DoughnutChartDoc.vue   |  18 +--
 src/views/chart/LineChartDemo.vue      | 141 +++++++++++++++++--
 src/views/chart/LineChartDoc.vue       |  11 +-
 src/views/chart/PieChartDemo.vue       |  47 ++++++-
 src/views/chart/PieChartDoc.vue        |  18 +--
 src/views/chart/PolarAreaChartDemo.vue |  57 +++++++-
 src/views/chart/PolarAreaChartDoc.vue  |  10 +-
 src/views/chart/RadarChartDemo.vue     |  47 ++++++-
 17 files changed, 628 insertions(+), 121 deletions(-)
 create mode 100644 src/EventBus.js

diff --git a/src/App.vue b/src/App.vue
index 3e0e3f8c8..5ddc4e3cd 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,6 +30,7 @@ import AppTopBar from '@/AppTopBar.vue';
 import AppMenu from '@/AppMenu.vue';
 import AppFooter from '@/AppFooter.vue';
 import AppConfigurator from '@/AppConfigurator.vue';
+import EventBus from '@/EventBus';
 
 export default {
     data() {
@@ -70,6 +71,14 @@ export default {
             this.theme = event.theme;
 
             this.activeMenuIndex = null;
+
+            EventBus.$emit('change-theme', event);
+
+            if (event.dark)
+                document.body.setAttribute('data-darktheme', 'true');
+            else
+                document.body.removeAttribute('data-darktheme')
+            
         },
         addClass(element, className) {
             if (!this.hasClass(element, className)) {
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index b86a4134f..df05e2446 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -16,28 +16,28 @@
                     <div class="p-grid">
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue', false)"/>
+                                <img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-blue'" />
                             </button>
                             <span>Saga Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-cyan.png" alt="Saga Cyan" @click="changeTheme($event, 'saga-cyan', false)"/>
+                                <img src="./assets/images/themes/saga-cyan.png" alt="Saga Cyan" @click="changeTheme($event, 'saga-cyan')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-cyan'" />
                             </button>
                             <span>Saga Cyan</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-deeppurple.png" alt="Saga Deep Purple" @click="changeTheme($event, 'saga-deeppurple', false)"/>
+                                <img src="./assets/images/themes/saga-deeppurple.png" alt="Saga Deep Purple" @click="changeTheme($event, 'saga-deeppurple')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-deeppurple'" />
                             </button>
                             <span>Saga Deep Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-green.png" alt="Saga Green" @click="changeTheme($event, 'saga-green', false)"/>
+                                <img src="./assets/images/themes/saga-green.png" alt="Saga Green" @click="changeTheme($event, 'saga-green')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-green'" />
                             </button>
                             <span>Saga Green</span>
@@ -51,133 +51,133 @@
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" @click="changeTheme($event, 'saga-orange', false)"/>
+                                <img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" @click="changeTheme($event, 'saga-orange')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-orange'" />
                             </button>
                             <span>Saga Orange</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" @click="changeTheme($event, 'saga-purple', false)"/>
+                                <img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" @click="changeTheme($event, 'saga-purple')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-purple'" />
                             </button>
                             <span>Saga Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" @click="changeTheme($event, 'saga-teal', false)"/>
+                                <img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" @click="changeTheme($event, 'saga-teal')"/>
                                 <i class="pi pi-check" v-if="theme === 'saga-teal'" />
                             </button>
                             <span>Saga Teal</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" @click="changeTheme($event, 'vela-blue', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" @click="changeTheme($event, 'vela-blue', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-blue'" />
                             </button>
                             <span>Vela Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" @click="changeTheme($event, 'vela-cyan', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" @click="changeTheme($event, 'vela-cyan', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-cyan'" />
                             </button>
                             <span>Vela Cyan</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" @click="changeTheme($event, 'vela-deeppurple', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" @click="changeTheme($event, 'vela-deeppurple', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-deeppurple'" />
                             </button>
                             <span>Vela Deep Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-green.png" alt="Vela Green" @click="changeTheme($event, 'vela-green', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-green.png" alt="Vela Green" @click="changeTheme($event, 'vela-green', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-green'" />
                             </button>
                             <span>Vela Green</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" @click="changeTheme($event, 'vela-indigo', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" @click="changeTheme($event, 'vela-indigo', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-indigo'" />
                             </button>
                             <span>Vela Indigo</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" @click="changeTheme($event, 'vela-orange', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" @click="changeTheme($event, 'vela-orange', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-orange'" />
                             </button>
                             <span>Vela Orange</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" @click="changeTheme($event, 'vela-purple', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" @click="changeTheme($event, 'vela-purple', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-purple'" />
                             </button>
                             <span>Vela Purple</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" @click="changeTheme($event, 'vela-teal', 'dark-theme-alt')"/>
+                                <img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" @click="changeTheme($event, 'vela-teal', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'vela-teal'" />
                             </button>
                             <span>Vela Teal</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light', false)"/>
+                                <img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light')"/>
                                 <i class="pi pi-check" v-if="theme === 'nova-light'" />
                             </button>
                             <span>Nova Light</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" @click="changeTheme($event, 'nova-dark', false)"/>
+                                <img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" @click="changeTheme($event, 'nova-dark')"/>
                                 <i class="pi pi-check" v-if="theme === 'nova-dark'" />
                             </button>
                             <span>Nova Dark</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" @click="changeTheme($event, 'nova-colored', false)"/>
+                                <img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" @click="changeTheme($event, 'nova-colored')"/>
                                 <i class="pi pi-check" v-if="theme === 'nova-colored'" />
                             </button>
                             <span>Nova Colored</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Colored" @click="changeTheme($event, 'nova-vue', false)"/>
+                                <img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Colored" @click="changeTheme($event, 'nova-vue')"/>
                                 <i class="pi pi-check" v-if="theme === 'nova-vue'" />
                             </button>
                             <span>Nova Vue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', 'dark-theme')"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-blue'" />
                             </button>
                             <span>Luna Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', 'dark-theme')"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', true)"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-green'" />
                             </button>
                             <span>Luna Green</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', 'dark-theme')" target="_blank"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', true)" target="_blank"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-amber'" />
                             </button>
                             <span>Luna Amber</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', 'dark-theme')" target="_blank"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', true)" target="_blank"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-pink'" />
                             </button>
                             <span>Luna Pink</span>
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index e0c18d85b..abd70c60b 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -25,22 +25,22 @@
                         <li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-purple')"><img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-teal')"><img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-blue')"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-cyan')"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" /><span>Vela Cyan</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-deeppurple')"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" /><span>Vela Deep Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-green')"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-indigo')"><img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" /><span>Vela Indigo</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-orange')"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-purple')"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-teal')"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-blue', true)"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-cyan', true)"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" /><span>Vela Cyan</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-deeppurple', true)"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" /><span>Vela Deep Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-indigo', true)"><img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" /><span>Vela Indigo</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-teal', true)"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-light')"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-dark')"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-colored')"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-vue')"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-amber')"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-blue')"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-green')"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-pink')"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-amber', true)"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-blue', true)"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-green', true)"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-pink', true)"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
                         <li><a @click="changeTheme($event, 'rhea')"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
                     </ul>
                 </transition>
@@ -97,8 +97,8 @@ export default {
         }
     },
     methods: {
-        changeTheme(event, theme) {
-            this.$emit('change-theme', {theme: theme});
+        changeTheme(event, theme, dark) {
+            this.$emit('change-theme', {theme: theme, dark: dark});
             this.activeMenuIndex = null;
             event.preventDefault();
         },
diff --git a/src/EventBus.js b/src/EventBus.js
new file mode 100644
index 000000000..27f698ab7
--- /dev/null
+++ b/src/EventBus.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+const EventBus = new Vue();
+export default EventBus;
\ No newline at end of file
diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue
index f69bb51a0..e886942dc 100755
--- a/src/views/chart/BarChartDemo.vue
+++ b/src/views/chart/BarChartDemo.vue
@@ -9,16 +9,16 @@
 
         <div class="content-section implementation">
             <h3 class="vertical">Vertical</h3>
-            <Chart type="bar" :data="basicData" />
+            <Chart type="bar" :data="basicData" :options="basicOptions" />
 
             <h3>Horizontal</h3>
-            <Chart type="horizontalBar" :data="basicData" />
+            <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
 
             <h3>Multi Axis</h3>
-            <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
+            <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
 
             <h3>Stacked</h3>
-            <Chart type="bar" :data="stackedData" :options="stackedOptions"/>
+            <Chart type="bar" :data="stackedData" :options="stackedOptions" />
         </div>
 
         <BarChartDoc/>
@@ -27,8 +27,21 @@
 
 <script>
 import BarChartDoc from './BarChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+    mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.applyDarkTheme();
+            else
+                this.applyLightTheme();
+        });
+
+        if (this.isDarkTheme()) {
+            this.applyDarkTheme();
+        }
+    },
     data() {
         return {
             basicData: {
@@ -41,7 +54,7 @@ export default {
                     },
                     {
                         label: 'My Second dataset',
-                        backgroundColor: '#9CCC65',
+                        backgroundColor: '#FFA726',
                         data: [28, 48, 40, 19, 86, 27, 90]
                     }
                 ]
@@ -105,7 +118,7 @@ export default {
                 datasets: [{
                     type: 'bar',
                     label: 'Dataset 1',
-                    backgroundColor: '#66BB6A',
+                    backgroundColor: '#42A5F5',
                     data: [
                         50,
                         25,
@@ -118,7 +131,7 @@ export default {
                 }, {
                     type: 'bar',
                     label: 'Dataset 2',
-                    backgroundColor: '#FFCA28',
+                    backgroundColor: '#66BB6A',
                     data: [
                         21,
                         84,
@@ -131,7 +144,7 @@ export default {
                 }, {
                     type: 'bar',
                     label: 'Dataset 3',
-                    backgroundColor: '#42A5F5',
+                    backgroundColor: '#FFA726',
                     data: [
                         41,
                         52,
@@ -157,7 +170,155 @@ export default {
                         stacked: true
                     }]
                 }
-            }
+            },
+            basicOptions: null
+        }
+    },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        applyLightTheme() {
+            this.basicOptions = {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        ticks: {
+                            fontColor: '#495057'
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            fontColor: '#495057'
+                        }
+                    }]
+                }
+            };
+
+            this.stackedOptions.scales.xAxes[0].ticks = {
+                fontColor: '#495057'
+            };
+            this.stackedOptions.scales.xAxes[0].gridLines = {
+                color: '#ebedef'
+            };
+            this.stackedOptions.scales.yAxes[0].ticks = {
+                fontColor: '#495057'
+            };
+            this.stackedOptions.scales.yAxes[0].gridLines = {
+                color: '#ebedef'
+            };
+            this.stackedOptions.legend = {
+                labels:  {
+                    fontColor: '#495057'
+                }
+            };
+            this.stackedOptions = {...this.stackedOptions};
+
+            this.multiAxisOptions.scales.xAxes = [{
+                    ticks: {
+                        fontColor: '#495057'
+                    },
+                    gridLines: {
+                        color: '#ebedef'
+                    }
+                }
+            ];
+            this.multiAxisOptions.scales.yAxes[0].ticks = {
+                fontColor: '#495057'
+            };
+            this.multiAxisOptions.scales.yAxes[0].gridLines = {
+                color: '#ebedef'
+            };
+            this.multiAxisOptions.scales.yAxes[1].ticks = {
+                fontColor: '#495057'
+            };
+            this.multiAxisOptions.scales.yAxes[1].gridLines = {
+                color: '#ebedef'
+            };
+            this.multiAxisOptions.legend = {
+                labels:  {
+                    fontColor: '#495057'
+                }
+            };
+            this.multiAxisOptions = {...this.multiAxisOptions};
+        },
+        applyDarkTheme() {
+            this.basicOptions = {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        ticks: {
+                            fontColor: '#ebedef'
+                        },
+                        gridLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            fontColor: '#ebedef'
+                        },
+                        gridLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }]
+                }
+            };
+
+            this.stackedOptions.scales.xAxes[0].ticks = {
+                fontColor: '#ebedef'
+            };
+            this.stackedOptions.scales.xAxes[0].gridLines = {
+                color: 'rgba(255,255,255,0.2)'
+            };
+            this.stackedOptions.scales.yAxes[0].ticks = {
+                fontColor: '#ebedef'
+            };
+            this.stackedOptions.scales.yAxes[0].gridLines = {
+                color: 'rgba(255,255,255,0.2)'
+            };
+            this.stackedOptions.legend = {
+                labels:  {
+                    fontColor: '#ebedef'
+                }
+            };
+            this.stackedOptions = {...this.stackedOptions};
+
+            this.multiAxisOptions.scales.xAxes = [{
+                    ticks: {
+                        fontColor: '#ebedef'
+                    },
+                    gridLines: {
+                        color: 'rgba(255,255,255,0.2)'
+                    }
+                }
+            ];
+            this.multiAxisOptions.scales.yAxes[0].ticks = {
+                fontColor: '#ebedef'
+            };
+            this.multiAxisOptions.scales.yAxes[0].gridLines = {
+                color: 'rgba(255,255,255,0.2)'
+            };
+            this.multiAxisOptions.scales.yAxes[1].ticks = {
+                fontColor: '#ebedef'
+            };
+            this.multiAxisOptions.scales.yAxes[1].gridLines = {
+                color: 'rgba(255,255,255,0.2)'
+            };
+            this.multiAxisOptions.legend = {
+                labels:  {
+                    fontColor: '#ebedef'
+                }
+            };
+            this.multiAxisOptions = {...this.multiAxisOptions};
         }
     },
     components: {
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index ece243118..678d39e34 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -32,7 +32,7 @@ export default {
 					},
 					{
 						label: 'My Second dataset',
-						backgroundColor: '#9CCC65',
+						backgroundColor: '#FFA726',
 						data: [28, 48, 40, 19, 86, 27, 90]
 					}
 				]
@@ -43,13 +43,13 @@ export default {
 					{
 						label: 'Dataset 1',
 						backgroundColor: [
-							'#EC407A',
-							'#AB47BC',
-							'#42A5F5',
-							'#7E57C2',
-							'#66BB6A',
-							'#FFCA28',
-							'#26A69A'
+							 '#EC407A',
+                            '#AB47BC',
+                            '#42A5F5',
+                            '#7E57C2',
+                            '#66BB6A',
+                            '#FFCA28',
+                            '#26A69A'
 						],
 						yAxisID: 'y-axis-1',
 						data: [65, 59, 80, 81, 56, 55, 10]
@@ -102,7 +102,7 @@ export default {
 					{
 						type: 'bar',
 						label: 'Dataset 1',
-						backgroundColor: '#66BB6A',
+						backgroundColor: '#42A5F5',
 						data: [
 							50,
 							25,
@@ -116,7 +116,7 @@ export default {
 					{
 						type: 'bar',
 						label: 'Dataset 2',
-						backgroundColor: '#FFCA28',
+						backgroundColor: '#66BB6A',
 						data: [
 							21,
 							84,
@@ -130,7 +130,7 @@ export default {
 					{
 						type: 'bar',
 						label: 'Dataset 3',
-						backgroundColor: '#42A5F5',
+						backgroundColor: '#FFA726',
 						data: [
 							41,
 							52,
diff --git a/src/views/chart/ComboChartDemo.vue b/src/views/chart/ComboChartDemo.vue
index 9bccc135a..1fb7e686f 100755
--- a/src/views/chart/ComboChartDemo.vue
+++ b/src/views/chart/ComboChartDemo.vue
@@ -17,8 +17,21 @@
 
 <script>
 import ComboChartDoc from './ComboChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+     mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.applyDarkTheme();
+            else
+                this.applyLightTheme();
+        });
+
+        if (this.isDarkTheme()) {
+            this.applyDarkTheme();
+        }
+    },
     data() {
         return {
             chartData: {
@@ -26,7 +39,7 @@ export default {
                 datasets: [{
                     type: 'line',
                     label: 'Dataset 1',
-                    borderColor: '#AA5493',
+                    borderColor: '#42A5F5',
                     borderWidth: 2,
                     fill: false,
                     data: [
@@ -41,7 +54,7 @@ export default {
                 }, {
                     type: 'bar',
                     label: 'Dataset 2',
-                    backgroundColor: '#2f4860',
+                    backgroundColor: '#66BB6A',
                     data: [
                         21,
                         84,
@@ -56,7 +69,7 @@ export default {
                 }, {
                     type: 'bar',
                     label: 'Dataset 3',
-                    backgroundColor: '#00bb7e',
+                    backgroundColor: '#FFA726',
                     data: [
                         41,
                         52,
@@ -81,6 +94,59 @@ export default {
             }
         }
     },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        applyLightTheme() {
+            this.chartOptions = {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        ticks: {
+                            fontColor: '#495057'
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            fontColor: '#495057'
+                        }
+                    }]
+                }
+            }
+        },
+        applyDarkTheme() {
+            this.chartOptions = {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        ticks: {
+                            fontColor: '#ebedef'
+                        },
+                        gridLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            fontColor: '#ebedef'
+                        },
+                        gridLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }]
+                }
+            };
+        }
+    },
     components: {
         'ComboChartDoc': ComboChartDoc
     }
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 587f7c58f..978899464 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -17,7 +17,7 @@ export default {
 				datasets: [{
 					type: 'line',
 					label: 'Dataset 1',
-					borderColor: '#AA5493',
+					borderColor: '#42A5F5',
 					borderWidth: 2,
 					fill: false,
 					data: [
@@ -33,7 +33,7 @@ export default {
 				{
 					type: 'bar',
 					label: 'Dataset 2',
-					backgroundColor: '#2f4860',
+					backgroundColor: '#66BB6A',
 					data: [
 						21,
 						84,
@@ -49,7 +49,7 @@ export default {
 				{
 					type: 'bar',
 					label: 'Dataset 3',
-					backgroundColor: '#00bb7e',
+					backgroundColor: '#FFA726',
 					data: [
 						41,
 						52,
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
index c931417b8..cce0ec72c 100755
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <Chart type="doughnut" :data="chartData" />
+            <Chart type="doughnut" :data="chartData" :options="chartOptions" />
         </div>
 
         <DoughnutChartDoc/>
@@ -17,8 +17,17 @@
 
 <script>
 import DoughnutChartDoc from './DoughnutChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+    mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.chartOptions = this.getDarkTheme();
+            else
+                this.chartOptions = this.getLightTheme();
+        });
+    },
     data() {
         return {
             chartData: {
@@ -38,6 +47,30 @@ export default {
                         ]
                     }
                 ]
+            },
+            chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
+        }
+    },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        getLightTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                } 
+            }
+        },
+        getDarkTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                } 
             }
         }
     },
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index 53df85217..841579f08 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -18,15 +18,15 @@ export default {
 					{
 						data: [300, 50, 100],
 						backgroundColor: [
-							"#FF6384",
-							"#36A2EB",
-							"#FFCE56"
-						],
-						hoverBackgroundColor: [
-							"#FF6384",
-							"#36A2EB",
-							"#FFCE56"
-						]
+                            "#42A5F5",
+                            "#66BB6A",
+                            "#FFA726"
+                        ],
+                        hoverBackgroundColor: [
+                            "#64B5F6",
+                            "#81C784",
+                            "#FFB74D"
+                        ]
 					}
 				]
 			}
diff --git a/src/views/chart/LineChartDemo.vue b/src/views/chart/LineChartDemo.vue
index fe57f2d57..0b6293f15 100755
--- a/src/views/chart/LineChartDemo.vue
+++ b/src/views/chart/LineChartDemo.vue
@@ -9,13 +9,13 @@
 
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
-            <Chart type="line" :data="basicData" />
+            <Chart type="line" :data="basicData" :options="basicOptions" />
 
             <h3>Multi Axis</h3>
             <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
 
             <h3>Line Styles</h3>
-            <Chart type="line" :data="lineStylesData" />
+            <Chart type="line" :data="lineStylesData" :options="basicOptions" />
         </div>
 
         <LineChartDoc/>
@@ -24,8 +24,21 @@
 
 <script>
 import LineChartDoc from './LineChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+    mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.applyDarkTheme();
+            else
+                this.applyLightTheme();
+        });
+
+        if (this.isDarkTheme()) {
+            this.applyDarkTheme();
+        }
+    },
     data() {
         return {
             basicData: {
@@ -35,15 +48,13 @@ export default {
                         label: 'First Dataset',
                         data: [65, 59, 80, 81, 56, 55, 40],
                         fill: false,
-                        backgroundColor: '#2f4860',
-                        borderColor: '#2f4860'
+                        borderColor: '#42A5F5'
                     },
                     {
                         label: 'Second Dataset',
                         data: [28, 48, 40, 19, 86, 27, 90],
                         fill: false,
-                        backgroundColor: '#00bb7e',
-                        borderColor: '#00bb7e'
+                        borderColor: '#FFA726'
                     }
                 ]
             },
@@ -52,14 +63,12 @@ export default {
                 datasets: [{
                     label: 'Dataset 1',
                     fill: false,
-                    backgroundColor: '#2f4860',
-                    borderColor: '#2f4860',
+                    borderColor: '#42A5F5',
                     yAxisID: 'y-axis-1',
                     data: [65, 59, 80, 81, 56, 55, 10]
                 }, {
                     label: 'Dataset 2',
                     fill: false,
-                    backgroundColor: '#00bb7e',
                     borderColor: '#00bb7e',
                     yAxisID: 'y-axis-2',
                     data: [28, 48, 40, 19, 86, 27, 90]
@@ -107,10 +116,120 @@ export default {
                         data: [12, 51, 62, 33, 21, 62, 45],
                         fill: true,
                         borderColor: '#FFA726',
-                        backgroundColor: '#FFCC80'
+                        backgroundColor: 'rgba(255,167,38,0.2)'
                     }
                 ]
-            }
+            },
+            basicOptions: null
+        }
+    },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        applyLightTheme() {
+            this.basicOptions = {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        ticks: {
+                            fontColor: '#495057'
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            fontColor: '#495057'
+                        }
+                    }]
+                }
+            };
+
+            this.multiAxisOptions.scales.xAxes = [{
+                    ticks: {
+                        fontColor: '#495057'
+                    },
+                    gridLines: {
+                        color: '#ebedef'
+                    }
+                }
+            ];
+            this.multiAxisOptions.scales.yAxes[0].ticks = {
+                fontColor: '#495057'
+            };
+            this.multiAxisOptions.scales.yAxes[0].gridLines = {
+                color: '#ebedef'
+            };
+            this.multiAxisOptions.scales.yAxes[1].ticks = {
+                fontColor: '#495057'
+            };
+            this.multiAxisOptions.scales.yAxes[1].gridLines = {
+                color: '#ebedef'
+            };
+            this.multiAxisOptions.legend = {
+                labels:  {
+                    fontColor: '#495057'
+                }
+            };
+            this.multiAxisOptions = {...this.multiAxisOptions};
+        },
+        applyDarkTheme() {
+            this.basicOptions = {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        ticks: {
+                            fontColor: '#ebedef'
+                        },
+                        gridLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            fontColor: '#ebedef'
+                        },
+                        gridLines: {
+                            color: 'rgba(255,255,255,0.2)'
+                        }
+                    }]
+                }
+            };
+
+            this.multiAxisOptions.scales.xAxes = [{
+                    ticks: {
+                        fontColor: '#ebedef'
+                    },
+                    gridLines: {
+                        color: 'rgba(255,255,255,0.2)'
+                    }
+                }
+            ];
+            this.multiAxisOptions.scales.yAxes[0].ticks = {
+                fontColor: '#ebedef'
+            };
+            this.multiAxisOptions.scales.yAxes[0].gridLines = {
+                color: 'rgba(255,255,255,0.2)'
+            };
+            this.multiAxisOptions.scales.yAxes[1].ticks = {
+                fontColor: '#ebedef'
+            };
+            this.multiAxisOptions.scales.yAxes[1].gridLines = {
+                color: 'rgba(255,255,255,0.2)'
+            };
+            this.multiAxisOptions.legend = {
+                labels:  {
+                    fontColor: '#ebedef'
+                }
+            };
+            this.multiAxisOptions = {...this.multiAxisOptions};
         }
     },
     components: {
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index f27e70748..4764f5028 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -26,15 +26,13 @@ export default {
 						label: 'First Dataset',
 						data: [65, 59, 80, 81, 56, 55, 40],
 						fill: false,
-						backgroundColor: '#2f4860',
-						borderColor: '#2f4860'
+						borderColor: '#42A5F5'
 					},
 					{
 						label: 'Second Dataset',
 						data: [28, 48, 40, 19, 86, 27, 90],
 						fill: false,
-						backgroundColor: '#00bb7e',
-						borderColor: '#00bb7e'
+						borderColor: '#FFA726'
 					}
 				]
 			},
@@ -44,8 +42,7 @@ export default {
 					{
 						label: 'Dataset 1',
 						fill: false,
-						backgroundColor: '#2f4860',
-						borderColor: '#2f4860',
+						borderColor: '#42A5F5',
 						yAxisID: 'y-axis-1',
 						data: [65, 59, 80, 81, 56, 55, 10]
 					},
@@ -104,7 +101,7 @@ export default {
 						data: [12, 51, 62, 33, 21, 62, 45],
 						fill: true,
 						borderColor: '#FFA726',
-						backgroundColor: '#FFCC80'
+                        backgroundColor: 'rgba(255,167,38,0.2)'
 					}
 				]
 			}
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index f19d0da9e..5a00b2094 100755
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <Chart type="pie" :data="chartData" />
+            <Chart type="pie" :data="chartData" :options="chartOptions" />
         </div>
 
         <PieChartDoc/>
@@ -17,8 +17,17 @@
 
 <script>
 import PieChartDoc from './PieChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+    mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.chartOptions = this.getDarkTheme();
+            else
+                this.chartOptions = this.getLightTheme();
+        });
+    },
     data() {
         return {
             chartData: {
@@ -27,17 +36,41 @@ export default {
                     {
                         data: [300, 50, 100],
                         backgroundColor: [
-                            "#FF6384",
-                            "#36A2EB",
-                            "#FFCE56"
+                            "#42A5F5",
+                            "#66BB6A",
+                            "#FFA726"
                         ],
                         hoverBackgroundColor: [
-                            "#FF6384",
-                            "#36A2EB",
-                            "#FFCE56"
+                            "#64B5F6",
+                            "#81C784",
+                            "#FFB74D"
                         ]
                     }
                 ]
+            },
+            chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
+        }
+    },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        getLightTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                } 
+            }
+        },
+        getDarkTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                } 
             }
         }
     },
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index c01dd4f68..dbeaf9d6d 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -18,15 +18,15 @@ export default {
 					{
 						data: [300, 50, 100],
 						backgroundColor: [
-							"#FF6384",
-							"#36A2EB",
-							"#FFCE56"
-						],
-						hoverBackgroundColor: [
-							"#FF6384",
-							"#36A2EB",
-							"#FFCE56"
-						]
+                            "#42A5F5",
+                            "#66BB6A",
+                            "#FFA726"
+                        ],
+                        hoverBackgroundColor: [
+                            "#64B5F6",
+                            "#81C784",
+                            "#FFB74D"
+                        ]
 					}
 				]
 			}
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
index 45334069f..d063a892c 100755
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <Chart type="polarArea" :data="chartData" />
+            <Chart type="polarArea" :data="chartData" :options="chartOptions" />
         </div>
 
         <PolarAreaChartDoc/>
@@ -17,8 +17,17 @@
 
 <script>
 import PolarAreaChartDoc from './PolarAreaChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+    mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.chartOptions = this.getDarkTheme();
+            else
+                this.chartOptions = this.getLightTheme();
+        });
+    },
     data() {
         return {
             chartData: {
@@ -31,11 +40,11 @@ export default {
                         14
                     ],
                     backgroundColor: [
-                        "#FF6384",
-                        "#4BC0C0",
-                        "#FFCE56",
-                        "#E7E9ED",
-                        "#36A2EB"
+                        "#42A5F5",
+                        "#66BB6A",
+                        "#FFA726",
+                        "#26C6DA",
+                        "#7E57C2"
                     ],
                     label: 'My dataset'
                 }],
@@ -46,7 +55,41 @@ export default {
                     "Grey",
                     "Blue"
                 ]
-            }
+            },
+            chartOptions: this.isDarkTheme() ? this.getDarkTheme(): this.getLightTheme()
+        }
+    },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        getLightTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                },
+                scale: {
+                    gridLines: {
+                        color: '#ebedef'
+                    }
+                }
+            };
+        },
+        getDarkTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                },
+                scale: {
+                    gridLines: {
+                        color: 'rgba(255,255,255,0.2)'
+                    }
+                }
+            };
         }
     },
     components: {
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index 8007ff7a0..4cb114a96 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -22,11 +22,11 @@ export default {
 						14
 					],
 					backgroundColor: [
-						"#FF6384",
-						"#4BC0C0",
-						"#FFCE56",
-						"#E7E9ED",
-						"#36A2EB"
+						"#42A5F5",
+                        "#66BB6A",
+                        "#FFA726",
+                        "#26C6DA",
+                        "#7E57C2"
 					],
 					label: 'My dataset'
 				}],
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
index ca3636cc9..3992322d5 100755
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <Chart type="radar" :data="chartData" />
+            <Chart type="radar" :data="chartData" :options="chartOptions" />
         </div>
 
         <RadarChartDoc/>
@@ -17,8 +17,17 @@
 
 <script>
 import RadarChartDoc from './RadarChartDoc';
+import EventBus from '@/EventBus';
 
 export default {
+    mounted() {
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.chartOptions = this.getDarkTheme();
+            else
+                this.chartOptions = this.getLightTheme();
+        });
+    },
     data() {
         return {
             chartData: {
@@ -45,7 +54,41 @@ export default {
                         data: [28, 48, 40, 19, 96, 27, 100]
                     }
                 ]
-            }
+            },
+            chartOptions: this.isDarkTheme() ? this.getDarkTheme(): this.getLightTheme()
+        }
+    },
+    methods: {
+        isDarkTheme() {
+            return document.body.getAttribute('data-darktheme') !== null;
+        },
+        getLightTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#495057'
+                    }
+                },
+                scale: {
+                    gridLines: {
+                        color: '#ebedef'
+                    }
+                }
+            };
+        },
+        getDarkTheme() {
+            return {
+                legend: {
+                    labels: {
+                        fontColor: '#ebedef'
+                    }
+                },
+                scale: {
+                    gridLines: {
+                        color: 'rgba(255,255,255,0.2)'
+                    }
+                }
+            };
         }
     },
     components: {