Setting dark mode does not save, always returns to automatic when reopening the app

jonathan_on

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.

metalsadman

@jonathan_on in what mode? better save the dark settings in localStorage.

jonathan_on

This post is deleted!

jonathan_on

@metalsadman I thought about it, but I thought that somehow the plugin maintained the state on its own.

metalsadman

@jonathan_on you didn’t answer my question. it won’t if you refresh/close your app, anyway just save the state in localstorage.

jonathan_on

@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.