Dark API

安装

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

用法

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.vue的created钩子中进行设置：

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>