usePreferredDark
リアクティブなダークテーマの優先設定。
デモ
使用方法
js
import { usePreferredDark } from '@vueuse/core'
const isDark = usePreferredDark()
コンポーネントの使用法
この関数は、
@vueuse/components
パッケージを介して、レンダーレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。
vue
<template>
<UsePreferredDark v-slot="{ prefersDark }">
Prefers Dark: {{ prefersDark }}
</UsePreferredDark>
</template>
型定義
typescript
/**
* Reactive dark theme preference.
*
* @see https://vueuse.dokyumento.jp/usePreferredDark
* @param [options]
*/
export declare function usePreferredDark(
options?: ConfigurableWindow,
): Ref<boolean, boolean>