> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize your app appearance with theming

<Frame>
  <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/header/theme.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=718426468f9fc24b2b554a1cc1b608f0" alt="Theming" className="w-full h-full rounded-xl" width="700" height="320" data-path="images/header/theme.png" />
</Frame>

## Features

1. Light / Dark / System mode
2. Custom color schemes
3. Dynamic theme switching
4. Theme persistence
5. Component theming
6. [Custom fonts](/features/fonts)

<Tip>
  Define your colors in the `Colors` object.
</Tip>

<Steps>
  <Step>
    Go to the `constants/Colors.ts` file and define your colors.
  </Step>

  <Step>
    ```javascript constants/Colors.ts {3-5} theme={null}
    export const Colors = {
        light: {
            primary: '#ffce00',
            secondary: '#1877F2',
            tertiary: '#00ff4e',
            ...
        },
        dark  : {
            primary: '#ffce00',
            secondary: '#1877F2',
            tertiary: '#00ff4e',
            ...
        },
    };
    ```
  </Step>
</Steps>

\## Use Theme in your components.
Actually, you don't need that. Because all components are working with the theme automatically.

But specific case:

<Steps>
  <Step>
    Go to your component file and use `const { mode } = useTheme();` hook.
  </Step>

  <Step>
    ```tsx theme={null}
    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>
        );
    }
    ```

    <Warning>
      You can use `Colors` object to get colors.
    </Warning>
  </Step>

  <Step>
    <Card title="ThemedText (click me)" icon="text" href="/components/typography">
      You can use `<ThemedText>` component to change your text color according to the theme.
    </Card>
  </Step>
</Steps>

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