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/SSG 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/SSG 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/SSG
When on a SSR/SSG 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/SSG builds. It’s because the client dark mode preference cannot be inferred, so SSR/SSG 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>