diff options
Diffstat (limited to 'src/components/_sila/Global/ThemeButton.vue')
-rw-r--r-- | src/components/_sila/Global/ThemeButton.vue | 77 |
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> |