SILABMC-263: Create theme buttonsila-dark-mode

3 files changed, 111 insertions, 0 deletions

diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
index 8d65b894..7af79129 100644
--- a/src/components/_sila/AppHeader/AppHeader.vue
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -184,6 +184,28 @@
               </b-dropdown>
             </li>
             <li class="nav-item header-nav">
+              <theme-button />
+              <!-- <b-nav-item class="header-nav">
+                <icon-sun />
+                <icon-moon />
+              </b-nav-item> -->
+              <!-- @click="initModalSettings" -->
+
+              <!-- <label for="checkbox" class="switch-label">
+               <span>🌙</span>
+                <span>☀️</span> 
+                <icon-sun  :title="$t('appHeader.titleProfile')" />
+                <icon-moon />
+
+                <div
+                  class="switch-toggle"
+                  :class="{
+                    'switch-toggle-checked': userTheme === 'dark-theme',
+                  }"
+                ></div> 
+              </label>-->
+            </li>
+            <li class="nav-item header-nav">
               <b-dropdown
                 id="app-header-user"
                 variant="link"
@@ -224,6 +246,10 @@ import IconRenew from '@carbon/icons-vue/es/renew/20';
 import IconNotification from '@carbon/icons-vue/es/notification/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import LoadingBar from '@/components/Global/LoadingBar';
+import ThemeButton from '@/components/_sila/Global/ThemeButton';
+
+// import IconSun from '@carbon/icons-vue/es/sun/20';
+// import IconMoon from '@carbon/icons-vue/es/moon/20';
 
 export default {
   name: 'AppHeader',
@@ -235,6 +261,9 @@ export default {
     StatusIcon,
     LoadingBar,
     IconNotification,
+    ThemeButton,
+    // IconSun,
+    // IconMoon,
   },
   mixins: [BVToastMixin],
   props: {
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>
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss
index 477a4ce4..249e0b6b 100644
--- a/src/env/assets/styles/_sila.scss
+++ b/src/env/assets/styles/_sila.scss
@@ -94,3 +94,8 @@ $loading-color: #c11d1d;
 $navbar-color: $dark;
 $header-height: 56px;
 $navigation-width: 280px;
+
+$brand-primary-dark: rgba(225, 23, 23, 1);
+$brand-secondary-dark: rgba(26, 62, 91, 1);
+$surface-primary-dark: rgba(18, 25, 31, 1);
+$surface-secondary-dark: rgba(12, 28, 41, 1);