useDark

カテゴリ

ブラウザ

エクスポートサイズ

3.03 kB

最終変更日

先週

デモ

ソース

基本使用法

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推奨のダークモードを使用しており、例えば、htmlタグにクラスdarkが適用されるとダークモードが有効になります。

html

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

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

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

例:

const isDark = useDark({
  selector: 'body',
  attribute: 'color-scheme',
  valueDark: 'dark',
  valueLight: 'light',
})

以下のようになります。

html

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

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

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

TypeScript

const isDark = useDark({
  onChanged(dark: boolean) {
    // update the dom, call the API or something
  },
})

const isDark = useDark({
  onChanged(dark) {
    // update the dom, call the API or something
  },
})

コンポーネントの使用法

この関数は、@vueuse/components パッケージを介して、レンダーレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。

vue

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

型宣言

typescript

export interface UseDarkOptions
  extends Omit<UseColorModeOptions<BasicColorSchema>, "modes" | "onChanged"> {
  /**
   * Value applying to the target element when isDark=true
   *
   * @default 'dark'
   */
  valueDark?: string
  /**
   * Value applying to the target element when isDark=false
   *
   * @default ''
   */
  valueLight?: string
  /**
   * A custom handler for handle the updates.
   * When specified, the default behavior will be overridden.
   *
   * @default undefined
   */
  onChanged?: (
    isDark: boolean,
    defaultHandler: (mode: BasicColorSchema) => void,
    mode: BasicColorSchema,
  ) => void
}
/**
 * Reactive dark mode with auto data persistence.
 *
 * @see https://vueuse.dokyumento.jp/useDark
 * @param options
 */
export declare function useDark(
  options?: UseDarkOptions,
): WritableComputedRef<boolean, boolean>