Theming

Features

Light / Dark / System mode
Custom color schemes
Dynamic theme switching
Theme persistence
Component theming
Custom fonts

Define your colors in the Colors object.

Go to the constants/Colors.ts file and define your colors.

constants/Colors.ts

export const Colors = {
    light: {
        primary: '#ffce00',
        secondary: '#1877F2',
        tertiary: '#00ff4e',
        ...
    },
    dark  : {
        primary: '#ffce00',
        secondary: '#1877F2',
        tertiary: '#00ff4e',
        ...
    },
};

## Use Theme in your components. Actually, you don’t need that. Because all components are working with the theme automatically. But specific case:

Go to your component file and use const { mode } = useTheme(); hook.

import { useTheme } from '@/hooks/useTheme';

const MyComponent = () => {
    const { mode } = useTheme();
    return (
        <View>
            // 1. Case
            <Text style={{ color: mode === 'dark' ? Colors.dark.primary : Colors.light.primary }}> 
            // or
            // 2. Case
            // I prefer this one. But if you want to use Text, use <ThemedText /> 😁
            // You don't need to use this examples. ThemedText is better.
             <Text style={{ color: Colors[mode].primary }}> 
                {mode}
            </Text>
        </View>
    );
}

You can use Colors object to get colors.

ThemedText (click me)

You can use <ThemedText> component to change your text color according to the theme.

Finally, your app is ready to use the theming feature. Colors will change according to the theme.

i18n Fonts

Get Started

AI Wrapper

Authentication

Monetization

Core Features

Analytics & Monitoring

Prebuilt Screens

UI Components

Troubleshooting

Features

ThemedText (click me)

​Features

ThemedText (click me)

Features