1 files changed, 40 insertions, 2 deletions

diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue
index 2d335636..61331487 100644
--- a/src/components/_sila/Global/Chart.vue
+++ b/src/components/_sila/Global/Chart.vue
@@ -48,6 +48,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      key: 0,
+    };
+  },
   computed: {
     readyData() {
       let filteredData = this.data.map((metric) => {
@@ -74,7 +79,6 @@ export default {
 
       return transform;
     },
-
     step() {
       return this.timeScale === 'hour' ? 10 : 60;
     },
@@ -129,6 +133,7 @@ export default {
     },
 
     chartOptions() {
+      this.key;
       return {
         chart: {
           type: 'spline',
@@ -136,6 +141,7 @@ export default {
           height: '360px',
           zoomType: 'xy',
           animation: true,
+          backgroundColor: this.changeColor('background'),
           resetZoomButton: {
             position: {
               x: 0,
@@ -149,7 +155,11 @@ export default {
           title: null,
           labels: {
             step: this.step,
+            style: {
+              color: this.changeColor('text'),
+            },
           },
+          gridLineColor: this.changeColor('line'),
           minorGridLineColor: '#1A3E5B1A',
         },
         yAxis: {
@@ -159,9 +169,15 @@ export default {
           title: null,
           minRange: this.minRange,
           minTickInterval: this.minTickInterval,
+          gridLineColor: this.changeColor('line'),
           minorGridLineColor: '#1A3E5B1A',
           plotLines: this.plotLines,
           plotBands: this.plotBands,
+          labels: {
+            style: {
+              color: this.changeColor('text'),
+            },
+          },
         },
         series: this.metricData.map((item) => ({
           ...item,
@@ -351,7 +367,11 @@ export default {
       return minTickInterval;
     },
   },
-
+  mounted() {
+    this.$root.$on('change-theme', () => {
+      this.key += 1;
+    });
+  },
   async created() {
     this.setOptions();
   },
@@ -364,6 +384,24 @@ export default {
         },
       });
     },
+    changeColor(type) {
+      const theme = localStorage.getItem('user-theme');
+      switch (type) {
+        case 'background':
+          return theme === 'light-theme' ? '#ffffff' : '#12191F';
+        /* Surface/Primary */
+        case 'text':
+          return theme === 'light-theme'
+            ? 'rgba(12, 28, 41, 0.6)'
+            : ' rgba(255, 255, 255, 0.6)';
+        /* Text/Tretiatry */
+        case 'line':
+          return theme === 'light-theme'
+            ? 'rgba(12, 28, 41, 0.6)'
+            : 'rgba(255, 255, 255, 0.6)';
+        /* Text/Tretiatry */
+      }
+    },
     setCategories(count, desc) {
       const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
       return arr;