Dark API

安装

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

用法

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>