---
title: usePreferredColorScheme
description: "Reactive color scheme preference. Returns a `ReadonlyObservable` tracking the user's preferred color scheme (`'dark'`, `'light'`, or `'no-preference'`) via `prefers-color-scheme` media queries."
category: Browser
type-table:
  import: "@usels/web"
  name: "UsePreferredColorScheme"
---

## Demo

## Usage

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

    function Component() {
      const scheme$ = usePreferredColorScheme();

      return <p>Preferred: {scheme$.get()}</p>;
    }
    ```

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

    function Component() {
      "use scope";
      const scheme$ = createPreferredColorScheme();

      return <p>Preferred: {scheme$.get()}</p>;
    }
    ```

  </Fragment>
</CodeTabs>