Setting dark mode does not save, always returns to automatic when reopening the app
-
I’m deploying dark mode, but when testing on the device, it starts on automatic, so I change using this.$q.dark.set(true), however when closing and reopening the application, it always returns to the default, in the false case . Am I wrong in some configuration?
<template> <q-layout view="lHh Lpr lFf"> <q-list :dark="dark"> <q-item tag="label" v-ripple > <q-item-section> <q-item-label>Dark theme</q-item-label> </q-item-section> <q-item-section side > <q-toggle v-model="dark" @input="changeDarkMode" /> </q-item-section> </q-item> </q-list> </q-layout> </template> <script> export default { name: 'MainLayout', created() { this.dark = this.$q.dark.isActive; }, watch: { '$q.dark.isActive' (val) { this.dark = val; } }, data() { return { dark: null } }, methods: { changeDarkMode(value) { this.dark = value; this.$q.dark.set(value); } } } </script>
And, in my quasar.conf.js:
config: { dark: 'auto' // or Boolean true/false }
I appreciate the help.
-
@jonathan_on in what mode? better save the dark settings in localStorage.
-
This post is deleted! -
@metalsadman I thought about it, but I thought that somehow the plugin maintained the state on its own.
-
@jonathan_on you didn’t answer my question. it won’t if you refresh/close your app, anyway just save the state in localstorage.
-
@metalsadman Sorry! In any way, both in the browser when refreshing and in the device, closing and opening again. But I followed your tip, thanks.