Skip to main content
Theming

​
Features

  1. Light / Dark / System mode
  2. Custom color schemes
  3. Dynamic theme switching
  4. Theme persistence
  5. Component theming
  6. Custom fonts
Define your colors in the Colors object.
1

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

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:
1

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

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.
3

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.
⌘I