1 files changed, 58 insertions, 0 deletions
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>