Dark Mode

Dark Mode works identically to Tailwind CSS's dark mode. By default it uses Appearance.getColorScheme() on native and prefers-color-scheme on web.

info

Expo apps do not follow the system appearance unless userInterfaceStyle is set to automatic. Please see the Expo docs for more information.

Manual color scheme control

To manualy control the color scheme you will need to enable the class darkMode strategy.

tailwind.config.js

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

The color scheme can be changed either imperatively or using the hook API.

App.tsx

import { colorScheme, useColorScheme } from "nativewind";

// Use imperatively
colorScheme.set("dark" | "light" | "system");

export default function App() {
  // Or as a hook
  const { setColorScheme } = useColorScheme();
  setColorScheme("dark" | "light" | "system");
}

Supporting system preference and manual selection

You can follow the Supporting system preference and manual selection instructions to support both system preference and manual selection.

On native, instead of localstorage you can use a storage solution such as React Native Async Storage and instead of adding classNames to the document, simply call colorScheme.set with the appropriate value.