Темизация и цвета

// constants/colors.ts
export const colors = {
    primary: '#c1442e',
    primaryDark: '#a83926',
    text: '#1a1a1a',
    textMuted: '#666',
    background: '#fafafa',
    surface: '#ffffff',
    border: '#e5e5e5',
    success: '#10b981',
    error: '#ef4444',
    warning: '#f59e0b',
};

const styles = StyleSheet.create({
    button: { backgroundColor: colors.primary },
    text: { color: colors.text },
});

import { useColorScheme } from 'react-native';

function Component() {
    const scheme = useColorScheme(); // 'light' | 'dark' | null

    return (
        <View style={{ backgroundColor: scheme === 'dark' ? '#000' : '#fff' }}>
            {/* контент */}
        </View>
    );
}

// contexts/ThemeContext.tsx
import { createContext, useContext, ReactNode } from 'react';
import { useColorScheme } from 'react-native';

type Theme = {
    colors: typeof lightColors;
    isDark: boolean;
};

const lightColors = { background: '#fff', text: '#000', primary: '#c1442e' };
const darkColors = { background: '#0a0a0a', text: '#fff', primary: '#ff6b4a' };

const ThemeContext = createContext<Theme | null>(null);

export function ThemeProvider({ children }: { children: ReactNode }) {
    const scheme = useColorScheme();
    const isDark = scheme === 'dark';

    const theme: Theme = {
        colors: isDark ? darkColors : lightColors,
        isDark,
    };

    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

export function useTheme() {
    const context = useContext(ThemeContext);
    if (!context) throw new Error('useTheme must be used within ThemeProvider');
    return context;
}

function Component() {
    const { colors, isDark } = useTheme();

    return (
        <View style={{ backgroundColor: colors.background }}>
            <Text style={{ color: colors.text }}>Текст</Text>
        </View>
    );
}

function Component() {
    const { colors } = useTheme();

    const styles = useMemo(() => StyleSheet.create({
        container: { backgroundColor: colors.background },
        text: { color: colors.text },
    }), [colors]);

    return <View style={styles.container} />;
}

function ThemeToggle() {
    const [mode, setMode] = useState<'system' | 'light' | 'dark'>('system');

    return (
        <View>
            <Pressable onPress={() => setMode('light')}>
                <Text>Светлая</Text>
            </Pressable>
            <Pressable onPress={() => setMode('dark')}>
                <Text>Тёмная</Text>
            </Pressable>
            <Pressable onPress={() => setMode('system')}>
                <Text>Системная</Text>
            </Pressable>
        </View>
    );
}

{
    "expo": {
        "userInterfaceStyle": "automatic"
    }
}