SILABMC-263: Create theme buttonsila-dark-mode

1 files changed, 77 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..9a0de644
--- /dev/null
+++ b/src/components/_sila/Global/ThemeButton.vue
@@ -0,0 +1,77 @@
+<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.getMediaPreference();
+    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;
+    },
+
+    getMediaPreference() {
+      const hasDarkPreference = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      ).matches;
+      if (hasDarkPreference) {
+        return 'dark-theme';
+      } else {
+        return 'light-theme';
+      }
+    },
+  },
+  // props: {},
+  // data() {},
+  // computed: {},
+  // watch: {},
+  // created() {},
+  // mounted() {},
+  // methods: {},
+};
+</script>
+
+<style lang="scss">
+:root.dark-theme {
+  --background-color-primary: #1e1e1e;
+  --background-color-secondary: #2d2d30;
+  --accent-color: #3f3f3f;
+  --text-primary-color: #ddd;
+}
+</style>