Skip to main content
This hook is deprecated. Use useColorScheme from react-native instead.

​
Overview

The useColorScheme hook provides a way to detect and manage the current color scheme (light or dark mode) in your React Native application. While NativeWind previously provided this hook, it’s now recommended to use React Native’s built-in useColorScheme hook directly.

​
Import

import { useColorScheme } from 'nativewind';
For new projects, import from react-native instead:
import { useColorScheme } from 'react-native';

​
Type Signature

function useColorScheme(): {
  colorScheme: ColorSchemeName;
  setColorScheme: (scheme: ColorSchemeName) => void;
  toggleColorScheme: () => void;
}

type ColorSchemeName = 'light' | 'dark' | null | undefined;

​
Return Value

​
colorScheme
ColorSchemeName
The current color scheme of the device. Can be 'light', 'dark', null, or undefined.
​
setColorScheme
(scheme: ColorSchemeName) => void
Function to manually set the color scheme. Updates the appearance using React Native’s Appearance.setColorScheme().
​
toggleColorScheme
() => void
Convenience function that toggles between light and dark mode. Switches to dark if currently light, and vice versa.

​
Usage

import { View, Text } from 'react-native';
import { useColorScheme } from 'nativewind';

export default function App() {
  const { colorScheme } = useColorScheme();

  return (
    <View className="flex-1 justify-center items-center">
      <Text className="text-lg">
        Current theme: {colorScheme}
      </Text>
    </View>
  );
}

​
Migration Guide

If you’re using the deprecated NativeWind useColorScheme, migrate to React Native’s version: 
import { useColorScheme } from 'nativewind';

function MyComponent() {
  const { colorScheme, setColorScheme, toggleColorScheme } = useColorScheme();
  // ...
}

​
Implementation Details

The NativeWind useColorScheme hook is a wrapper around React Native’s core functionality:
  • Uses useColorScheme from React Native to get the current color scheme
  • Provides setColorScheme via Appearance.setColorScheme()
  • Implements toggleColorScheme by reading current scheme with Appearance.getColorScheme() and switching between light/dark