4 files changed, 123 insertions, 17 deletions
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
index 1821c2b4..d26f3b7c 100644
--- a/src/components/_sila/AppHeader/AppHeader.vue
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -190,6 +190,9 @@
               </b-dropdown>
             </li>
             <li class="nav-item header-nav">
+              <theme-button />
+            </li>
+            <li class="nav-item header-nav">
               <b-dropdown
                 id="app-header-user"
                 variant="link"
@@ -231,6 +234,7 @@ import IconNotification from '@carbon/icons-vue/es/notification/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import LoadingBar from '@/components/Global/LoadingBar';
 import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import ThemeButton from '@/components/_sila/Global/ThemeButton';
 
 export default {
   name: 'AppHeader',
@@ -242,6 +246,7 @@ export default {
     StatusIcon,
     LoadingBar,
     IconNotification,
+    ThemeButton,
   },
   mixins: [BVToastMixin, LoadingBarMixin],
   props: {
diff --git a/src/components/_sila/AppNavigation/AppNavigation.vue b/src/components/_sila/AppNavigation/AppNavigation.vue
index a6fef6bb..2e79fc03 100644
--- a/src/components/_sila/AppNavigation/AppNavigation.vue
+++ b/src/components/_sila/AppNavigation/AppNavigation.vue
@@ -112,8 +112,9 @@ svg {
   list-style: none;
   padding-left: 0;
   margin-left: 0;
-  background-color: $gray-5;
-
+  @include themify($themes) {
+    background-color: themed('nav-list');
+  }
   .nav-item {
     outline: none;
     & > a {
@@ -158,18 +159,17 @@ svg {
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: theme-color('secondary');
-
-  &:hover {
-    background-color: theme-color-level(dark, -10.5);
-    color: theme-color('dark');
-  }
-
-  &:focus {
-    background-color: theme-color-level(light, 0);
-    box-shadow: inset 0 0 0 2px theme-color('primary');
-    color: theme-color('dark');
-    outline: 0;
+  @include themify($themes) {
+    color: themed('text-secondary');
+    &:hover {
+      background-color: themed('nav-hover');
+      color: themed('text-secondary');
+    }
+    &:focus {
+      background-color: themed('nav-focus');
+      color: themed('text-secondary');
+      outline: 0;
+    }
   }
 
   &:active {
@@ -217,11 +217,16 @@ svg {
   left: 0;
   z-index: $zindex-fixed;
   overflow-y: auto;
-  background-color: $white;
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
   border-right: 1px solid theme-color-level('light', 2.85);
 
+  @include themify($themes) {
+    color: themed('text-primary');
+    background-color: themed('surface-primary');
+    border-right: 1px solid themed('gray-30');
+  }
+
   @include media-breakpoint-down(md) {
     z-index: $zindex-fixed + 2;
   }
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>