暗色插件

TIP

为了更好地了解此Quasar插件,请转到“风格和特性暗色模式”页面。

Dark API

安装

该插件会自动安装。 无需执行任何操作即可直接使用它。

用法

WARNING

不要手动给下面的isActivemode赋值。 而是使用set(val)方法。

Vue文件内部

import { useQuasar } from 'quasar'
setup () {
  const $q = useQuasar()

  // 获得状态
  console.log($q.dark.isActive) // true, false

  // 获取配置状态
  console.log($q.dark.mode) // "auto", true, false

  // 设置状态
  $q.dark.set(true) // or false or "auto"

  // 切换
  $q.dark.toggle()
}

SSR构建中,你可能想从你的/src/App.vue中设置这个:

import { useQuasar } from 'quasar'

export default {
  setup () {
    const $q = useQuasar()

    // 在此调用;相当于组件创建时
    $q.dark.set(true)
  }
}

Vue文件之外

// 警告! 此方法
// 不适用于SSR构建。

import { Dark } from 'quasar'

// 获得状态
console.log(Dark.isActive)

// 获取配置状态
console.log(Dark.mode) // "auto", true, false

// 设置状态
Dark.set(true) // 或者false或者"auto"

// 切换
Dark.toggle()

通过quasar.config.js

您也可以使用/quasar.config.js设置暗色模式状态:

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

关于SSR的注意事项

在SSR构建中:

  • 使用暗色模式的import { Dark } from 'quasar'不会出错,但是不会起作用(不会做任何事情)。 但是您可以使用其他两种方式(请参阅上一节)。 我们建议通过quasar.config.js。
  • 对于SSR构建,最好避免将暗色模式设置为“auto”。 这是因为无法推断出客户端的暗色模式首选项,因此SSR将始终以浅色模式呈现,然后当客户端接管时,它将切换为暗色(如果是这种情况)。 结果,将发生屏幕的快速闪烁。

Watching for status change

<template>...</template>

<script>
import { useQuasar } from 'quasar'
import { watch } from 'vue'

export default {
  setup () {
    const $q = useQuasar()

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