Toggle between dark and light theme

[JokerMartini]

How can one toggle between dark and light theme at runtime? I did this before in Vuetify using this following code, but i have no idea how to this in Quasar? Any help would be appreciated. It doesn't appear to be documented anywhere that I could find.

import Vue from 'vue'
...
Vue.prototype.$nuxt.$vuetify.theme.dark = store.get('darkMode')

My sample code...

<template>
  <q-page class="row items-center justify-evenly">
    <q-toggle
      v-model="themeIsDark"
      @input="toggleTheme()"
      label="Dark"
      checked-icon="check"
      unchecked-icon="close"
    />
  </q-page>
</template>

<script lang="ts">
import { Todo, Meta } from 'components/models';
import { defineComponent, ref } from '@vue/composition-api';
import Vue from 'vue'

export default defineComponent({
  name: 'PageIndex',
  components: { },
  setup() {
    const themeIsDark = ref<boolean>(false);
    const toggleTheme = () => {
      console.log(themeIsDark.value);
      // Vue.prototype.$nuxt.$vuetify.theme.dark = store.get('darkMode')
    };

    return { themeIsDark, toggleTheme };
  }
});
</script>

[victj99]

you must enable the dark mode plugin in quasar.config.js then you can activate it with:
"this.$q.dark.set(true)" or "this.$q.dark.toggle()" inside vue files

https://quasar.dev/quasar-plugins/dark#introduction

[hawkeye64]

Don't forget to add the "Dark" plugin to quasar.conf.js

      plugins: [
        'Dark'
      ]

Also, in quasar.conf.js, you can set auto mode if you like:

    framework: {
      config: {
        dark: 'auto'
      },
      ...

If you provide a button to the user to toggle, you can do it like this:

<q-btn flat round @click="$q.dark.toggle()" :icon="$q.dark.isActive ? 'brightness_2' : 'brightness_5'" />

and, finally, if you need to adjust things based on dark or not, you can do it like this:

:class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"

[JokerMartini]

Why set the dark mode to Auto, what is that doing?

[hawkeye64]

When the user has a preference set to dark mode in the browser, then quasar will automatically switch