暗黑插件 | Quasar 中文网

暗黑插件

提示

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

¥For a better understanding of this Quasar plugin, please head to the Style & Identity Dark Mode page.

Quasar CLI

Vite plugin

UMD

// quasar.config file

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

用法(Usage)

¥Usage

警告

请勿手动为下方的 isActive 或 mode 赋值。相反，请使用 set(val) 方法。

¥Do not manually assign a value to isActive or mode from below. Instead, use the set(val) method.

Vue 文件内部(Inside of a Vue file)

¥Inside of a Vue file

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 中进行以下设置：

¥On a SSR build, you may want to set this from your /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 之外文件(Outside of a Vue file)

¥Outside of a Vue file

// 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()

关于服务器渲染的说明(Note about SSR)

¥Note about SSR

在 SSR 构建中：

¥When on a SSR build:

使用暗黑模式时，从 ‘quasar’ 导入 Dark 的方法不会出错，但不会起作用（不会执行任何操作）。但是，你可以使用 Vue 文件内部方法或配置（推荐）方法。
¥Import Dark from ‘quasar’ method of using Dark mode will not error out but it will not work (won’t do anything). But, you can use the Inside of a Vue file approach or the Configuration (recommended) approach.
在 SSR 构建中，最好避免将暗黑模式设置为 ‘auto’。这是因为无法推断客户端的暗黑模式偏好设置，所以服务器端渲染 (SSR) 将始终以亮黑模式渲染，然后当客户端接管时，它将切换到暗黑模式（如果情况如此）。因此，屏幕将出现快速闪烁。
¥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.

状态变化监控(Watching for status change)

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

1. Introduction

2. Dark API

3. Configuration

4. 用法(Usage)

4.1. Vue 文件内部(Inside of a Vue file)

4.2. Vue 之外文件(Outside of a Vue file)

5. 关于服务器渲染的说明(Note about SSR)

6. 状态变化监控(Watching for status change)