暗黑插件 | Quasar 框架

暗黑模式插件

提示

为了更好地理解这个 Quasar 插件，请前往样式与标识暗黑模式页面。

Quasar CLI

Vite 插件 / Vue CLI

UMD

// quasar.config file

return {
  framework: {
    config: {
      dark: /* look at QuasarConfOptions from the API card */
    }
  }
}

用法

警告

不要手动为 isActive 或 mode 分配值。请使用 set(val) 方法。

在 Vue 文件中

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

  // get status
  console.log($q.dark.isActive) // true, false

  // get configured status
  console.log($q.dark.mode) // "auto", true, false

  // set status
  $q.dark.set(true) // or false or "auto"

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

在 **SSR 构建** 中，你可能想要从你的 /src/App.vue 中设置。

import { useQuasar } from 'quasar'

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

    // calling here; equivalent to when component is created
    $q.dark.set(true)
  }
}

在 Vue 文件之外

// Warning! This method will not
// work on SSR builds.

import { Dark } from 'quasar'

// get status
console.log(Dark.isActive)

// get configured status
console.log(Dark.mode) // "auto", true, false

// set status
Dark.set(true) // or false or "auto"

// toggle
Dark.toggle()

关于 SSR 的说明

在 SSR 构建中

从 'quasar' 中导入 Dark 的使用暗黑模式的方法不会报错，但它不会起作用（不会做任何事）。但是，你可以使用在 Vue 文件中的方法，或者使用配置（推荐）方法。
最好避免在 SSR 构建中将暗黑模式设置为 'auto'。因为无法推断客户端的暗黑模式偏好，所以 SSR 始终会以亮模式渲染，然后当客户端接管时，它会切换到暗模式（如果需要）。结果，屏幕会快速闪烁。

监控状态变化

<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>

发现错误了吗？在浏览器中编辑此页面

1. 简介

2. 暗黑模式 API

3. 配置

4. 用法

4.1. 在 Vue 文件中

4.2. 在 Vue 文件之外

5. 关于 SSR 的说明

6. 监控状态变化