Skip to main content

​
Overview

The useThemeColor hook provides theme-aware color values that automatically adapt to the device’s color scheme (light or dark mode). It allows components to specify custom colors for each theme or fall back to predefined theme colors.

​
Signature

function useThemeColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
): string

​
Parameters

​
props
{ light?: string; dark?: string }
required
Object containing optional color overrides for light and dark modes.
​
props.light
string
Custom color to use in light mode. If provided, this overrides the theme default.
​
props.dark
string
Custom color to use in dark mode. If provided, this overrides the theme default.
​
colorName
string
required
The name of the color from the theme palette. Available color names:
  • text - Primary text color
  • background - Background color
  • tint - Tint/accent color
  • icon - Icon color
  • tabIconDefault - Default tab icon color
  • tabIconSelected - Selected tab icon color

​
Return Value

Returns a string containing the appropriate color value based on the current color scheme. If a custom color is provided in props for the current theme, it returns that; otherwise, it returns the color from the theme palette.

​
Theme Colors

The default theme colors are defined in constants/theme.ts:

​
Light Mode

  • text: #11181C
  • background: #fff
  • tint: #0a7ea4
  • icon: #687076
  • tabIconDefault: #687076
  • tabIconSelected: #0a7ea4

​
Dark Mode

  • text: #ECEDEE
  • background: #151718
  • tint: #fff
  • icon: #9BA1A6
  • tabIconDefault: #9BA1A6
  • tabIconSelected: #fff

​
Usage Examples

​
Using Theme Defaults

import { useThemeColor } from '@/hooks/use-theme-color';
import { View } from 'react-native';

export function MyComponent() {
  const backgroundColor = useThemeColor({}, 'background');
  
  return <View style={{ backgroundColor }} />;
}

​
Using Custom Colors

import { useThemeColor } from '@/hooks/use-theme-color';
import { View } from 'react-native';

export function ThemedView({ lightColor, darkColor, style, ...props }) {
  const backgroundColor = useThemeColor(
    { light: lightColor, dark: darkColor },
    'background'
  );
  
  return <View style={[{ backgroundColor }, style]} {...props} />;
}

​
Themed Text Component

import { useThemeColor } from '@/hooks/use-theme-color';
import { Text, type TextProps } from 'react-native';

export type ThemedTextProps = TextProps & {
  lightColor?: string;
  darkColor?: string;
};

export function ThemedText({ 
  style, 
  lightColor, 
  darkColor, 
  ...otherProps 
}: ThemedTextProps) {
  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
  
  return <Text style={[{ color }, style]} {...otherProps} />;
}

​
Accessing Multiple Colors

import { useThemeColor } from '@/hooks/use-theme-color';
import { View, Text } from 'react-native';

export function Card() {
  const backgroundColor = useThemeColor({}, 'background');
  const textColor = useThemeColor({}, 'text');
  const tintColor = useThemeColor({}, 'tint');
  
  return (
    <View style={{ backgroundColor, padding: 16 }}>
      <Text style={{ color: textColor }}>Card Title</Text>
      <View style={{ borderColor: tintColor, borderWidth: 1 }} />
    </View>
  );
}

​
Implementation Details

  • Uses useColorScheme from React Native to detect the current color scheme
  • Falls back to 'light' if the color scheme cannot be determined
  • Custom colors in props take precedence over theme defaults
  • Works seamlessly with React Native’s automatic dark mode support
  • useColorScheme - From React Native, returns the current color scheme ('light' or 'dark')

​
Source

Defined in hooks/use-theme-color.ts:9

Build docs developers (and LLMs) love

Get started for freeTalk to us