Skip to main content

​
Overview

The useColorScheme hook is a re-export of React Native’s built-in hook that detects the device’s current color scheme preference.

​
Import

import { useColorScheme } from '@/src/hooks/useColorScheme';

​
Return Value

​
colorScheme
'light' | 'dark' | null
The current color scheme. Returns 'light', 'dark', or null if the color scheme cannot be determined.

​
Implementation

This hook simply re-exports React Native’s useColorScheme: 
export { useColorScheme } from 'react-native';
For web platforms, there’s a separate implementation in useColorScheme.web.ts: 
export function useColorScheme() {
  return 'light';
}

​
Usage Example

import { useColorScheme } from '@/src/hooks/useColorScheme';

export default function ThemedComponent() {
  const colorScheme = useColorScheme();
  
  const backgroundColor = colorScheme === 'dark' ? '#000' : '#fff';
  const textColor = colorScheme === 'dark' ? '#fff' : '#000';

  return (
    <View style={{ backgroundColor }}>
      <Text style={{ color: textColor }}>
        Current theme: {colorScheme}
      </Text>
    </View>
  );
}

​
Platform Differences

  • Mobile (iOS/Android): Returns the device’s system color scheme
  • Web: Always returns 'light' (as defined in useColorScheme.web.ts)

​
Used By

This hook is used internally by:
  • useThemeColor - To determine which color to use based on the current theme
  • ThemedText - To apply theme-aware text colors
  • ThemedView - To apply theme-aware background colors

Build docs developers (and LLMs) love

Get started for freeTalk to us