SILABMC-263: Dark Theme

2 files changed, 98 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;
diff --git a/src/components/_sila/Global/ThemeButton.vue b/src/components/_sila/Global/ThemeButton.vue
new file mode 100644
index 00000000..e88c948d
--- /dev/null
+++ b/src/components/_sila/Global/ThemeButton.vue
@@ -0,0 +1,58 @@
+<template>
+  <b-nav-item @click="toggleTheme">
+    <icon-sun v-if="userTheme !== 'dark-theme'" />
+    <icon-moon v-if="userTheme === 'dark-theme'" />
+  </b-nav-item>
+</template>
+
+<script>
+import IconSun from '@carbon/icons-vue/es/sun/20';
+import IconMoon from '@carbon/icons-vue/es/moon/20';
+
+export default {
+  name: 'ThemeButton',
+  components: {
+    IconSun,
+    IconMoon,
+  },
+  data() {
+    return {
+      userTheme: 'light-theme',
+    };
+  },
+  mounted() {
+    const initUserTheme = this.getTheme();
+    this.setTheme(initUserTheme);
+  },
+  methods: {
+    toggleTheme() {
+      const activeTheme = localStorage.getItem('user-theme');
+      if (activeTheme === 'light-theme') {
+        this.setTheme('dark-theme');
+      } else {
+        this.setTheme('light-theme');
+      }
+    },
+
+    getTheme() {
+      return localStorage.getItem('user-theme');
+    },
+
+    setTheme(theme) {
+      localStorage.setItem('user-theme', theme);
+      this.userTheme = theme;
+      document.documentElement.className = theme;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.dark-theme {
+  body,
+  .app-content {
+    background-color: $surface-primary-dark !important;
+    color: $text-primary-dark;
+  }
+}
+</style>