1---
2category: Browser
3---
4 
5# usePreferredDark
6 
7Reactive dark theme preference.
8 
9## Usage
10 
11```ts
12import { usePreferredDark } from '@vueuse/core'
13 
14const isDark = usePreferredDark()
15```
16 
17## Component Usage
18 
19```vue
20<template>
21  <UsePreferredDark v-slot="{ prefersDark }">
22    Prefers Dark: {{ prefersDark }}
23  </UsePreferredDark>
24</template>
25```
26 
27## Type Declarations
28 
29```ts
30/**
31 * Reactive dark theme preference.
32 *
33 * @see https://vueuse.org/usePreferredDark
34 * @param [options]
35 *
36 * @__NO_SIDE_EFFECTS__
37 */
38export declare function usePreferredDark(
39  options?: ConfigurableWindow,
40): ComputedRef<boolean>
41```
42