Skip to main content
Themed components automatically adapt their colors based on the current theme (light or dark mode). They use the useThemeColor hook to select appropriate colors.

​
ThemedText

A text component that automatically applies theme-aware colors and supports multiple typography variants.

​
Props

​
type
'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'
default:"'default'"
Typography variant to apply:
  • default: 16px font size, 24px line height
  • title: 32px bold font, 32px line height
  • defaultSemiBold: 16px semi-bold font, 24px line height
  • subtitle: 20px bold font
  • link: 16px font with blue color (#0a7ea4), 30px line height
​
lightColor
string
Custom color to use in light mode. Overrides the default theme text color.
​
darkColor
string
Custom color to use in dark mode. Overrides the default theme text color.
ThemedText also accepts all standard React Native TextProps.

​
TypeScript Interface

export type ThemedTextProps = TextProps & {
  lightColor?: string;
  darkColor?: string;
  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};

​
Usage Examples

import { ThemedText } from '@/components/themed-text';

// Default text
<ThemedText>This is default themed text</ThemedText>

// Title variant
<ThemedText type="title">Page Title</ThemedText>

// Subtitle variant
<ThemedText type="subtitle">Section Heading</ThemedText>

// Semi-bold text
<ThemedText type="defaultSemiBold">Important text</ThemedText>

// Link style
<ThemedText type="link">Click here</ThemedText>

// Custom colors per theme
<ThemedText lightColor="#000000" darkColor="#FFFFFF">
  Custom themed text
</ThemedText>

// With additional props
<ThemedText
  type="subtitle"
  numberOfLines={2}
  ellipsizeMode="tail"
>
  Long text that will be truncated...
</ThemedText>

​
ThemedView

A view container component that automatically applies theme-aware background colors.

​
Props

​
lightColor
string
Custom background color to use in light mode. Overrides the default theme background color.
​
darkColor
string
Custom background color to use in dark mode. Overrides the default theme background color.
ThemedView also accepts all standard React Native ViewProps.

​
TypeScript Interface

export type ThemedViewProps = ViewProps & {
  lightColor?: string;
  darkColor?: string;
};

​
Usage Examples

import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';

// Basic themed container
<ThemedView>
  <ThemedText>Content with themed background</ThemedText>
</ThemedView>

// Custom colors per theme
<ThemedView lightColor="#f0f0f0" darkColor="#1a1a1a">
  <ThemedText>Custom themed background</ThemedText>
</ThemedView>

// With additional styles
<ThemedView style={{ padding: 16, borderRadius: 8 }}>
  <ThemedText>Styled themed container</ThemedText>
</ThemedView>

// Full page container
<ThemedView style={{ flex: 1 }}>
  <ThemedText type="title">Page Content</ThemedText>
</ThemedView>

​
How Theme Colors Work

Both components use the useThemeColor hook internally, which:
  1. Detects the current color scheme (light or dark)
  2. Returns the appropriate color from the theme configuration
  3. Allows overriding with custom lightColor and darkColor props
The default theme colors are defined in @/constants/theme.

Build docs developers (and LLMs) love

Get started for freeTalk to us