Dark Mode

NativeWind includes a dark variant that lets you style your site differently when dark mode is enabled

By default this uses Appearance.getColorScheme() on native and prefers-color-scheme on web.

caution

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

Toggling dark mode manually

The dark: variant is controlled by the useColorScheme() hook.

CSS

To manualy toggle dark mode on web, you will need to enable the class strategy. This is all you need to do, we implement the logic to support both system preference and manual selection

// tailwind.config.js

module.exports = {
  darkMode: 'class',
  // ...
}