useDark

自動データ永続化を備えたリアクティブなダークモード。

基本的な使い方

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

挙動

useDarkはusePreferredDarkとuseStorageを組み合わせています。起動時にlocalStorage/sessionStorageから値を読み取り（キーは設定可能）、ユーザーが設定したカラースキームがあるかどうかを確認します。ない場合は、ユーザーのシステム設定を使用します。isDarkのrefを変更すると、対応する要素の属性が更新され、その設定がストレージ（デフォルトキー: vueuse-color-scheme）に保存されます。

useDarkは、CSSで適切なセレクタを適用するためにDOM属性の変更のみを処理します。実際のスタイル、テーマ、CSSは処理しません。

設定

デフォルトでは、Tailwind CSSが推奨するダークモードを使用します。これは、クラスdarkがhtmlタグに適用されるとダークモードが有効になります。例えば：

<!--light-->
<html>
  ...
</html>

<!--dark-->
<html class="dark">
  ...
</html>

それでも、ほとんどのCSSフレームワークで動作するようにカスタマイズすることもできます。

例えば：

import { useDark } from '@vueuse/core'
// ---cut---
const isDark = useDark({
  selector: 'body',
  attribute: 'color-scheme',
  valueDark: 'dark',
  valueLight: 'light',
})

は次のように動作します：

<!--light-->
<html>
  <body color-scheme="light">
    ...
  </body>
</html>

<!--dark-->
<html>
  <body color-scheme="dark">
    ...
  </body>
</html>

上記の設定がまだニーズに合わない場合は、onChangedオプションを使用して、更新の処理方法を完全に制御できます。

import { useDark } from '@vueuse/core'
// ---cut---
const isDark = useDark({
  onChanged(dark) {
    // DOMを更新したり、APIを呼び出したりする
  },
})

コンポーネントの使用

<template>
  <UseDark v-slot="{ isDark, toggleDark }">
    <button @click="toggleDark()">
      Is Dark: {{ isDark }}
    </button>
  </UseDark>
</template>

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
#