Quasar深色模式插件

提示

为了更好的理解这个插件的工作原理，请先阅读Dark Mode页面。

Dark API

安装

这个插件会自动被安装，不需要做额外的配置就可以直接使用。

用法

警告

不要手动给下面的isActive 或 mode 赋值，而是使用set(val)函数去改变他们

在 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/SSG 时，需要在/src/App.vue文件中通过下述方式实现:

import { useQuasar } from "quasar";

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

    // 在这里调用等价于组件的 onCreated 声明周期
    $q.dark.set(true);
  },
};

在 Vue 文件之外

// 警告！这个函数在 SRR 中不可用

import { Dark } from "quasar";

// 查询暗色模式是否被开启
console.log(Dark.isActive);

// 查询配置信息
console.log(Dark.mode); // "auto", true, false

// 设置暗色模式状态
Dark.set(true); // or false or "auto"

// 切换暗色模式开关
Dark.toggle();

通过 quasar.config.js

您也可以通过/quasar.config.js来设置暗色模式的状态：

framework: {
  config: {
    dark: "auto"; // or Boolean true/false
  }
}

开发 SSR/SSG 时注意

当开发 SSR/SSG 时:

import { Dark } from 'quasar' 这种方式使用暗色模式不会报错，但是也不会成功运行（它不会在 ssr 模式中做任何事情），您可以通过另外两种方式实现，我们推荐使用 quasar.config.js
server 端无法得知客户端的配色首选项。当 Dark 模式设置为 'auto' 时，页面会以亮色模式渲染，客户端接管后再解析 'auto'（并开始追踪 prefers-color-scheme 媒体查询）。因此，偏好暗黑模式的用户会看到一次短暂的亮色闪烁。如果你能在 server 端得知首选项（例如通过 cookie），最好按上文所示从 /src/App.vue 中用它调用 $q.dark.set()：这样整个页面从一开始就以正确的模式渲染。

监听状态的变化

<template>...</template>

<script setup>
  import { useQuasar } from 'quasar'
  import { watch } from 'vue'

  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