diff options
-rw-r--r-- | src/components/_sila/AppHeader/AppHeader.vue | 29 | ||||
-rw-r--r-- | src/components/_sila/Global/ThemeButton.vue | 77 | ||||
-rw-r--r-- | src/env/assets/styles/_sila.scss | 5 |
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); |