# 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.](https://docs.expo.dev/guides/color-schemes/)
:::

## Toggling dark mode manually

The `dark:` variant is controlled by the [`useColorScheme()`](../../api/use-color-scheme) hook.

```SnackPlayer name=Dark Mode
import { Pressable, Text } from "react-native"
import { styled, useColorScheme } from "nativewind";

const StyledPressable = styled(Pressable)
const StyledText = styled(Text)

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

  return (
    <StyledPressable
      onPress={toggleColorScheme}
      className="flex-1 items-center justify-center dark:bg-slate-800"
    >
      <StyledText
        selectable={false}
        className="dark:text-white"
      >
        {`Try clicking me! ${colorScheme === "dark" ? "🌙" : "🌞"}`}
      </StyledText>
    </StyledPressable>
  );
}
```

### CSS

To manualy toggle dark mode on web, you will need to enable the [`class` strategy](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually). 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',
  // ...
}
```
