Fix toggleTheme method to update theme and store

it in local storage
This commit is contained in:
Gabriel Pastori 2023-11-24 01:09:21 -03:00
parent af3f3f5736
commit 919d1726c5
2 changed files with 7 additions and 6 deletions

View File

@ -24,9 +24,7 @@
<v-icon>mdi-cog</v-icon> <v-icon>mdi-cog</v-icon>
</v-btn> </v-btn>
<v-btn @click="toggleTheme" icon> <v-btn @click="toggleTheme" icon>
<v-icon>mdi-{{ <v-icon>mdi-{{ dark ? "white-balance-sunny" : "weather-night" }}</v-icon>
dark ? "white-balance-sunny" : "weather-night"
}}</v-icon>
</v-btn> </v-btn>
</v-app-bar> </v-app-bar>
<SettingsModal ref="settings" /> <SettingsModal ref="settings" />
@ -48,9 +46,9 @@ export default {
}, },
methods: { methods: {
toggleTheme() { toggleTheme() {
this.theme.global.name = this.theme.global.current.dark const theme = this.theme.global.current.dark ? "light" : "dark";
? "light" this.theme.global.name = theme;
: "dark"; localStorage.setItem("theme", theme);
}, },
openSettings() { openSettings() {
this.$refs.settings.open(); this.$refs.settings.open();

View File

@ -11,9 +11,12 @@ import 'vuetify/styles'
// Composables // Composables
import { createVuetify } from 'vuetify' import { createVuetify } from 'vuetify'
const defaultTheme = localStorage.getItem('theme') || 'light'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({ export default createVuetify({
theme: { theme: {
defaultTheme,
themes: { themes: {
light: { light: {
colors: { colors: {