useColorScheme

Deprecated

The useColorScheme hook from nativewind is deprecated in v5. Use useColorScheme from react-native and Appearance.setColorScheme() directly instead.

Migration

Replace the Nativewind import with the React Native equivalent:

- import { useColorScheme } from "nativewind";
+ import { useColorScheme, Appearance } from "react-native";

The v4 API returned { colorScheme, setColorScheme, toggleColorScheme }. In v5, use the React Native APIs directly:

import { useColorScheme, Appearance, Pressable, Text } from "react-native";
 
function ThemeToggle() {
  const colorScheme = useColorScheme();
 
  const restoreSystemTheme = () => Appearance.setColorScheme("unspecified");
 
  const toggleColorScheme = () => {
    Appearance.setColorScheme(
      Appearance.getColorScheme() === "dark" ? "light" : "dark"
    );
  };
 
  return (
    <>
      <Pressable onPress={toggleColorScheme}>
        <Text>Current: {colorScheme}</Text>
      </Pressable>
      <Pressable onPress={restoreSystemTheme}>
        <Text>Use system theme</Text>
      </Pressable>
    </>
  );
}

The "unspecified" value restores system appearance on the Expo 57 native target. Browser manual theme controls need separate handling.

See the Dark Mode guide for more details.

useColorScheme

Migration

On this page