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.


Log in to reply