---
title: usePreferredDark
description: "Reactive dark theme preference. Returns `Observable<boolean>` that tracks whether the user prefers a dark color scheme via the `(prefers-color-scheme: dark)` media query."
category: Browser
type-table:
  import: "@usels/web"
  name: "UsePreferredDark"
  params:
    children:
      - UseMediaQueryOptions
---

A thin wrapper around [`useMediaQuery`](/web/browser/useMediaQuery).

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { usePreferredDark } from "@usels/web";

    function Component() {
      const isDark$ = usePreferredDark();

      return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createPreferredDark } from "@usels/web";

    function Component() {
      "use scope";
      const isDark$ = createPreferredDark();

      return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
    }
    ```

  </Fragment>
</CodeTabs>

### SSR with ssrWidth

<CodeTabs>
  <Fragment slot="hook">
    ```tsx
    import { usePreferredDark } from "@usels/web";

    function Component() {
      const isDark$ = usePreferredDark({ ssrWidth: 1280 });

      return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createPreferredDark } from "@usels/web";

    function Component() {
      "use scope";
      const isDark$ = createPreferredDark({ ssrWidth: 1280 });

      return <p>{isDark$.get() ? "Dark mode" : "Light mode"}</p>;
    }
    ```

  </Fragment>
</CodeTabs>