Skip to main content

​
Overview

The Colors constant provides a comprehensive set of theme-aware colors for both light and dark modes. These colors are used throughout the app to ensure consistent theming and automatic adaptation to the user’s color scheme preference.

​
Import

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

​
Color Values

​
Light Mode

​
text
string
default:"#11181C"
Primary text color for light mode
​
background
string
default:"#fff"
Background color for light mode
​
tint
string
default:"#0a7ea4"
Tint/accent color for light mode (brand color)
​
icon
string
default:"#687076"
Default icon color for light mode
​
tabIconDefault
string
default:"#687076"
Inactive tab bar icon color for light mode
​
tabIconSelected
string
default:"#0a7ea4"
Active tab bar icon color for light mode

​
Dark Mode

​
text
string
default:"#ECEDEE"
Primary text color for dark mode
​
background
string
default:"#151718"
Background color for dark mode
​
tint
string
default:"#fff"
Tint/accent color for dark mode
​
icon
string
default:"#9BA1A6"
Default icon color for dark mode
​
tabIconDefault
string
default:"#9BA1A6"
Inactive tab bar icon color for dark mode
​
tabIconSelected
string
default:"#fff"
Active tab bar icon color for dark mode

​
Usage Examples

​
Direct Access

Access colors directly based on the current color scheme: 
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

function TabLayout() {
  const colorScheme = useColorScheme();
  
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
      }}>
      {/* Tab screens */}
    </Tabs>
  );
}

​
With useThemeColor Hook

The recommended way to use colors is with the useThemeColor hook: 
import { useThemeColor } from '@/hooks/use-theme-color';

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

​
In Styled Components

Use colors in ThemedText and ThemedView components: 
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';

function MyComponent() {
  return (
    <ThemedView>
      <ThemedText type="title">Welcome!</ThemedText>
      <ThemedText>This text automatically adapts to the theme.</ThemedText>
    </ThemedView>
  );
}

​
Type Definition

export const Colors: {
  light: {
    text: string;
    background: string;
    tint: string;
    icon: string;
    tabIconDefault: string;
    tabIconSelected: string;
  };
  dark: {
    text: string;
    background: string;
    tint: string;
    icon: string;
    tabIconDefault: string;
    tabIconSelected: string;
  };
};

​
Best Practices

Use Theme-Aware Hooks

Always use useThemeColor hook instead of accessing Colors directly. This allows for runtime color overrides and proper theme switching.

Consistent Color Keys

Use the defined color keys (text, background, tint, etc.) consistently across your app for a unified design system.

Override When Needed

Pass lightColor and darkColor props to themed components when you need to override the default colors for specific use cases.

​
Alternative Styling Solutions

The colors constant is just one approach to theming. You can also use:

Build docs developers (and LLMs) love

Get started for freeTalk to us