暗色插件

TIP

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

安装

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

用法

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。
  • 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. 对于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>

Dark API

Loading API...
Please wait...