> ## Documentation Index
> Fetch the complete documentation index at: https://nativecn.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Dark mode

> Toggle between light and dark mode using NativeWind.

<Steps>
  <Step title="Set up dark mode">
    ```js theme={null}
    module.exports = {
      darkMode: "class",
      // ...
    };
    ```
  </Step>

  <Step title="Add a mode toggle">
    Place a mode toggle on your app to toggle between light and dark mode.

    ```jsx theme={null}
    import { colorScheme, useColorScheme } from "nativewind";

    export function ModeToggle() {
      const { colorScheme, setColorScheme } = useColorScheme();

      return (
        <Button
          variant="outline"
          onClick={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}
        >
          Toggle mode
        </Button>
      )
    }
    ```
  </Step>
</Steps>

<Note>Reference: [NativeWind docs](https://www.nativewind.dev/v4/core-concepts/dark-mode#manual-color-scheme-control)</Note>