​
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

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

Was this page helpful?

i18nFonts