Quasarでダークモードを設定する方法

• 概要
• 環境
• サンプルコード
• ちょっと解説
• 動作確認
• 参考サイト

概要

$q.dark を設定するだけでダークモードにできます
今回はボタンで切り替えるサンプルを紹介します

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <div>$q.dark = {{ mode }}</div>
  <q-btn 
   color="white"
   text-color="black"
   label="Toggle"
   @click="toggleDark()"
   />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar'

const $q = useQuasar();
const mode = ref($q.dark.isActive);

$q.dark.set(false);

const toggleDark = () => {
  $q.dark.toggle();
  mode.value = $q.dark.isActive;
}
</script>

ちょっと解説

useQuasar で q オブジェクトを取得します
あとは dark プロパティがあるのでそれに true or false or auto を設定します

auto の場合システム側の環境に合わせて自動的に切り替えてくれます

動作確認

参考サイト

• https://quasar.dev/quasar-plugins/dark