Skip to main content

​
Overview

The useThemeColor hook automatically selects the appropriate color based on the current color scheme (light or dark mode). It allows you to override default theme colors or use colors from your theme configuration.

​
Import

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

​
Usage

​
Using Default Theme Colors

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

export function MyComponent() {
  const backgroundColor = useThemeColor({}, 'background');
  const textColor = useThemeColor({}, 'text');

  return (
    <View style={{ backgroundColor }}>
      <Text style={{ color: textColor }}>Themed content</Text>
    </View>
  );
}

​
Custom Color Overrides

From src/components/themed-view.tsx: 
import { View } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';

export function ThemedView({ style, lightColor, darkColor, ...otherProps }) {
  const backgroundColor = useThemeColor(
    { light: lightColor, dark: darkColor },
    'background'
  );

  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}
Using the component: 
<ThemedView lightColor="#fff" darkColor="#000">
  <Text>Custom themed background</Text>
</ThemedView>

​
Text Styling

From src/components/themed-text.tsx: 
import { Text } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';

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

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

​
Background Color Only

From src/components/parallax-scroll-view.tsx: 
import { useThemeColor } from '@/hooks/use-theme-color';

export function ParallaxScrollView() {
  const backgroundColor = useThemeColor({}, 'background');

  return (
    <Animated.ScrollView
      style={{ backgroundColor }}
    >
      {/* Content */}
    </Animated.ScrollView>
  );
}

​
Parameters

​
props
object
required
An object containing optional color overrides for light and dark modes.
​
colorName
keyof Colors.light & keyof Colors.dark
required
The name of the color from your theme configuration. Must exist in both light and dark theme objects.Available color names (based on @/constants/theme):
  • '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 hex color value appropriate for the current color scheme.

​
Type Definition

import { Colors } from '@/constants/theme';

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

​
How It Works

  1. Detects the current color scheme using useColorScheme
  2. Defaults to 'light' if no scheme is detected
  3. Checks if a custom color override is provided for the current scheme
  4. Returns the custom color if provided, otherwise returns the color from the theme configuration

​
Theme Configuration

The hook uses color definitions from @/constants/theme: 
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

​
Use Empty Object for Default Colors

When you don’t need custom overrides, pass an empty object: 
const color = useThemeColor({}, 'text');

​
Provide Both Light and Dark Overrides

When overriding colors, provide both light and dark values for consistency: 
const color = useThemeColor(
  { light: '#fff', dark: '#000' },
  'background'
);

​
Create Themed Components

Use this hook to create reusable themed components: 
export function ThemedButton({ lightBg, darkBg, children }) {
  const backgroundColor = useThemeColor(
    { light: lightBg, dark: darkBg },
    'tint'
  );

  return (
    <TouchableOpacity style={{ backgroundColor }}>
      {children}
    </TouchableOpacity>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us