useColorMode

自動データ永続化を備えたリアクティブなカラーモード（ダーク / ライト / カスタム）。

基本的な使い方

import { useColorMode } from '@vueuse/core'

const mode = useColorMode() // Ref<'dark' | 'light'>

デフォルトでは、usePreferredDark（別名 auto モード）を使用してユーザーのブラウザの設定に一致します。ref を読み取ると、デフォルトで現在のカラーモード（dark、light またはカスタムモード）が返されます。emitAuto オプションを有効にすることで、返されるモードに auto モードを含めることができます。ref に書き込むと、DOM の更新がトリガーされ、カラーモードがローカルストレージ（またはカスタムストレージ）に永続化されます。auto を渡すことで、自動モードに戻すことができます。

import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
// ---cut---
mode.value // 'dark' | 'light'

mode.value = 'dark' // ダークモードに変更して永続化

mode.value = 'auto' // 自動モードに変更

設定

import { useColorMode } from '@vueuse/core'

const mode = useColorMode({
  attribute: 'theme',
  modes: {
    // カスタムカラー
    dim: 'dim',
    cafe: 'cafe',
  },
}) // Ref<'dark' | 'light' | 'dim' | 'cafe'>

高度な使い方

システムの設定とストレージに保存されたユーザーのオーバーライドモードに明示的にアクセスすることもできます。

import { useColorMode } from '@vueuse/core'

const { system, store } = useColorMode()

system.value // 'dark' | 'light'
store.value // 'dark' | 'light' | 'auto'

const myColorMode = computed(() => store.value === 'auto' ? system.value : store.value)

コンポーネントでの使用

<template>
  <UseColorMode v-slot="color">
    <button @click="color.mode = color.mode === 'dark' ? 'light' : 'dark'">
      Mode {{ color.mode }}
    </button>
  </UseColorMode>
</template>