Skip to main content
The useThemeColor hook provides theme-aware color values that automatically adapt based on the current color scheme. It supports custom color overrides and falls back to predefined theme colors.

​
Function Signature

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

​
Parameters

​
props
object
required
An object containing optional color overrides for each theme:
​
light
string
Custom color value to use in light mode. If provided, this overrides the theme color.
​
dark
string
Custom color value to use in dark mode. If provided, this overrides the theme color.
​
colorName
string
required
The name of the color from the theme constants. Must be a valid key that exists in both Colors.light and Colors.dark.Available values:
  • 'text' - Primary text color
  • 'background' - Background color
  • 'tint' - Accent/tint color
  • 'icon' - Icon color
  • 'tabIconDefault' - Inactive tab icon color
  • 'tabIconSelected' - Active tab icon color

​
Return Value

​
color
string
The resolved color string. Priority order:
  1. Custom color from props.light or props.dark (based on current theme)
  2. Theme color from Colors[theme][colorName]

​
Usage

​
Basic Usage with Theme Colors

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

export function ThemedView({ style, ...otherProps }: ThemedViewProps) {
  const backgroundColor = useThemeColor({}, 'background');

  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}

​
With Custom Color Overrides

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

export function ThemedText({
  style,
  lightColor,
  darkColor,
  ...rest
}: ThemedTextProps) {
  const color = useThemeColor(
    { light: lightColor, dark: darkColor },
    'text'
  );

  return <Text style={[{ color }, style]} {...rest} />;
}

​
Using Custom Colors

// Using the themed component with custom colors
<ThemedText 
  lightColor="#11181C"
  darkColor="#ECEDEE">
  Custom colored text
</ThemedText>

// Falls back to theme colors when no custom colors provided
<ThemedText>
  Default themed text
</ThemedText>

​
Multiple Theme Colors

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

export function ParallaxScrollView() {
  const backgroundColor = useThemeColor({}, 'background');
  const tintColor = useThemeColor({}, 'tint');
  const iconColor = useThemeColor({}, 'icon');
  
  return (
    <View style={{ backgroundColor }}>
      <Icon name="home" color={iconColor} />
      <Button color={tintColor} title="Action" />
    </View>
  );
}

​
Implementation Details

The hook internally uses useColorScheme to determine the current theme and selects the appropriate color: 
export function useThemeColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
) {
  const theme = useColorScheme() ?? 'light';
  const colorFromProps = props[theme];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}

​
Theme Color Values

The default theme colors are defined in /constants/theme.ts: 
export const Colors = {
  light: {
    text: '#11181C',
    background: '#fff',
    tint: '#0a7ea4',
    icon: '#687076',
    tabIconDefault: '#687076',
    tabIconSelected: '#0a7ea4',
  },
  dark: {
    text: '#ECEDEE',
    background: '#151718',
    tint: '#fff',
    icon: '#9BA1A6',
    tabIconDefault: '#9BA1A6',
    tabIconSelected: '#fff',
  },
};

​
Best Practices

  1. Use theme colors by default: Only provide custom colors when you need to override the theme
  2. Consistent naming: Use the same color names throughout your app for consistency
  3. Avoid hardcoded colors: Use this hook instead of hardcoding colors in styles
  4. Component composition: Create reusable themed components like ThemedText and ThemedView

​
Source File

/hooks/use-theme-color.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us