usePreferredDark

Demo

Prefers Dark:

false

Usage

import { usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()

import { usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html

<UsePreferredDark v-slot="{ prefersDark }">
  Prefers Dark: {{ prefersDark }}
</UsePreferredDark>

<UsePreferredDark v-slot="{ prefersDark }">
  Prefers Dark: {{ prefersDark }}
</UsePreferredDark>

Type Declarations

typescript

/**
 * Reactive dark theme preference.
 *
 * @see https://vueuse.org/usePreferredDark
 * @param [options]
 */
export declare function usePreferredDark(
  options?: ConfigurableWindow
): Ref<boolean>

/**
 * Reactive dark theme preference.
 *
 * @see https://vueuse.org/usePreferredDark
 * @param [options]
 */
export declare function usePreferredDark(
  options?: ConfigurableWindow
): Ref<boolean>