暗色插件

TIP

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

Dark API

Loading API...
Please wait...

安装

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

用法

WARNING

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

Vue文件内部

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

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

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

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

SSR构建中,可以从/src/App.vuecreated钩子中进行设置:

export default {
  // ...

  created () {
    this.$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.conf.js

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

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

关于SSR的注意事项

在SSR构建中:

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

Watching for status change

<template>...</template>

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