Dark Mode

How It Works

AniUI uses CSS custom properties with a .dark class. NativeWind automatically applies the dark class based on the device's color scheme. All AniUI components respond to dark mode without any extra configuration.

Expo Setup

1. Configure app.json

Set userInterfaceStyle to "automatic" to follow the system setting:

{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

2. Import global CSS

Make sure your root layout imports the global stylesheet:

import "../global.css";

export default function RootLayout() {
  // ...
}

That's it. NativeWind detects the system color scheme and applies the .dark class automatically. All CSS variables switch between their light and dark values.

Manual Toggle

To let users switch themes manually, use NativeWind's useColorScheme hook:

import { Pressable, Text } from "react-native";
import { useColorScheme } from "nativewind";

export function ThemeToggle() {
  const { colorScheme, toggleColorScheme } = useColorScheme();

  return (
    <Pressable
      onPress={toggleColorScheme}
      className="rounded-md bg-secondary px-4 py-2"
    >
      <Text className="text-secondary-foreground">
        {colorScheme === "dark" ? "Light Mode" : "Dark Mode"}
      </Text>
    </Pressable>
  );
}

Bare React Native

For non-Expo projects, NativeWind uses React Native's built-in Appearance API. No extra setup is needed — just ensure your NativeWind config is correct and global.css is loaded.

Using Dark Mode in Components

AniUI components use semantic color tokens that automatically adapt. If you need conditional styling, use NativeWind's dark: prefix:

<View className="bg-white dark:bg-gray-900">
  <Text className="text-black dark:text-white">
    Adapts to color scheme
  </Text>
</View>

{/* But prefer semantic tokens — they adapt automatically: */}
<View className="bg-background">
  <Text className="text-foreground">
    Always correct
  </Text>
</View>