1

Set up dark mode

module.exports = {
  darkMode: "class",
  // ...
};
2

Add a mode toggle

Place a mode toggle on your app to toggle between light and dark mode.

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>
  )
}
Reference: NativeWind docs
1

Set up dark mode

module.exports = {
  darkMode: "class",
  // ...
};
2

Add a mode toggle

Place a mode toggle on your app to toggle between light and dark mode.

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>
  )
}
Reference: NativeWind docs