Dark Plugin
v1.3+

TIP

For a better understanding of this Quasar plugin, please head to the Style & Identity Dark Mode page.

Installation

This plugin is automatically installed. No need to do anything but directly use it.

Usage

WARNING

Do not manually assign a value to isActive or mode from below. Instead, use the set(val) method.

Inside of a Vue file

// get status
console.log(this.$q.dark.isActive) // true, false

// get configured status
console.log(this.$q.dark.mode) // "auto", true, false

// set status
this.$q.dark.set(true) // or "false" or "auto"

On a SSR build, you can set this from a created hook from your /src/App.vue:

export default {
  // ...

  created () {
    this.$q.dark.set(true)
  }
}

Outside of a Vue file

// Warning! This method will not
// work on SSR builds.

import { Dark } from 'quasar'

// get status
console.log(Dark.isActive)

// get configured status
console.log(Dark.mode) // "auto", true, false

// set status
Dark.set(true) // or "false" or "auto"

Through quasar.conf.js

You can also use /quasar.conf.js to set the Dark mode status:

framework: {
  config: {
    dark: 'auto' // or Boolean true/false
  }
}

Note about SSR

When on a SSR build:

  • import { Dark } from 'quasar' method of using Dark mode will not error out but it will not work (won’t do anything). But you can use the other two ways (see previous section). We recommend through quasar.conf.js.
  • It’s preferred to avoid setting Dark mode to ‘auto’ for SSR builds. It’s because the client dark mode preference cannot be inferred, so SSR will always render in light mode then when the client takes over, it will switch to Dark (if it will be the case). As a result, a quick flicker of the screen will occur.

Watching for status change

<template>...</template>

<script>
export default {
  watch: {
    '$q.dark.isActive' (val) {
      console.log(val ? 'On dark mode' : 'On light mode')
    }
  }
}
</script>

Dark API