TIP
For a better understanding of this Quasar plugin, please head to the Style & Identity Dark Mode page.
// quasar.config file
return {
framework: {
config: {
dark: /* look at QuasarConfOptions from the API card */
}
}
}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
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
// get status
console.log($q.dark.isActive) // true, false
// get configured status
console.log($q.dark.mode) // "auto", true, false
// set status
$q.dark.set(true) // or false or "auto"
// toggle
$q.dark.toggle()
}On a SSR build, you may want to set this from your /src/App.vue:
import { useQuasar } from 'quasar'
export default {
setup() {
const $q = useQuasar()
// calling here; equivalent to when component is created
$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"
// toggle
Dark.toggle()Note about SSR
When on a SSR build:
- Import
Darkfrom ‘quasar’ method of using Dark mode will not error out but it will not work (won’t do anything). But, you can use the Inside of a Vue file approach or the Configuration (recommended) approach. - 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 setup>
import { useQuasar } from 'quasar'
import { watch } from 'vue'
const $q = useQuasar()
watch(
() => $q.dark.isActive,
val => {
console.log(val ? 'On dark mode' : 'On light mode')
}
)
</script>