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?

        <q-layout view="lHh Lpr lFf">
            <q-list :dark="dark">
                		<q-item-label>Dark theme</q-item-label>
                	<q-item-section side >
                		<q-toggle v-model="dark" @input="changeDarkMode" />
    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;

    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.

Log in to reply