Dark Mode

Nativewind v5 supports dark mode through the system preference using the prefers-color-scheme media query. This works automatically with React Native's Appearance API on native and the CSS media query on web.

System Preference (Automatic)

By default, Tailwind CSS's dark: variant uses the system color scheme. In Expo, install expo-system-ui and set "userInterfaceStyle": "automatic" in the expo object of app.json. Rebuild when native configuration changes:

import { View, Text } from "react-native";
 
function Card() {
  return (
    <View className="bg-white dark:bg-gray-900">
      <Text className="text-black dark:text-white">
        Adapts to system theme
      </Text>
    </View>
  );
}

Under the hood, dark: maps to @media (prefers-color-scheme: dark), which is reactive on both native and web. When the user changes their system theme, styles update automatically.

Manual Selection (User Toggle)

To allow users to manually toggle between light and dark mode, use React Native's Appearance API:

import { Appearance, Pressable, Text } from "react-native";
 
function ThemeToggle() {
  const toggleTheme = () => {
    Appearance.setColorScheme(
      Appearance.getColorScheme() === "dark" ? "light" : "dark"
    );
  };
 
  return (
    <Pressable onPress={toggleTheme} className="p-4 bg-gray-200 dark:bg-gray-800">
      <Text className="text-black dark:text-white">Toggle Theme</Text>
    </Pressable>
  );
}

On the Expo 57 target, restore the system preference with:

Appearance.setColorScheme("unspecified");

This manual override is for native. React Native Web does not turn it into a browser theme selector. Keep browser theme selection separate if your app supports a manual browser toggle. Qualified selectors such as :root.dark are rejected by the native compiler; use media queries on native.

You can read the current color scheme using React Native's useColorScheme hook:

import { useColorScheme } from "react-native";
 
function MyComponent() {
  const colorScheme = useColorScheme();
  // colorScheme is "light" | "dark" | null
}

See a full implementation with an animated toggle at nativewind/theme-toggle-v5 on GitHub.

Best Practices

Always provide both light and dark mode styles. React Native can have issues with conditionally applied styles:

{/* Always specify both variants */}
<Text className="text-black dark:text-white" />
 
{/* Avoid only specifying one */}
<Text className="dark:text-white" />