深色外掛 | Quasar 框架

Dark Plugin

TIP

為了更深入了解這個 Quasar 外掛程式，請前往樣式與識別深色模式頁面。

Quasar CLI

Vite plugin / Vue CLI

UMD

// quasar.config file

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

Usage

WARNING

請勿從下方手動賦值給 isActive 或 mode。請改用 set(val) 方法。

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 進行設定

import { useQuasar } from 'quasar'

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

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

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

When on a SSR build

從 ‘quasar’ 匯入 Dark 的方法來使用深色模式不會報錯，但它不會工作（不會做任何事情）。但是，您可以使用Vue 檔案內方法或設定（推薦）方法。
建議避免將深色模式在 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>

Caught a mistake?Edit this page in browser

1. Introduction

2. Dark API

3. Configuration

4. Usage

4.1. Inside of a Vue file

4.2. Outside of a Vue file

5. Note about SSR

6. Watching for status change