theme

Theme System Documentation

This document provides comprehensive documentation for the theme system in the Fynd Commerce App. The theme system provides dynamic theming capabilities with support for colors, typography, spacing, and layout configurations.

📚 Table of Contents

1. Overview - High-level architecture and concepts
2. Theme Provider - Theme provider implementation and configuration
3. Theme Hooks - Detailed documentation of theme hooks
4. Theme Types - TypeScript types and interfaces
5. Theme Fetching - How themes are fetched and managed
6. Customization - How to extend and customize themes
7. Best Practices - Guidelines and patterns for theming

🚀 Quick Start

Basic Theme Usage

import {useCustomTheme} from '../shared/hooks/use-custom-theme';

const MyComponent = () => {
  const theme = useCustomTheme();

  return (
    <View style={{backgroundColor: theme.color.primaryColor}}>
      <Text style={{color: theme.color.textBody}}>Hello World</Text>
    </View>
  );
};

Themed Styles Hook

import {useThemedStyles} from '../shared/hooks/use-themed-styles';

const MyComponent = () => {
  const styles = useThemedStyles(theme => ({
    container: {
      backgroundColor: theme.color.bgColor,
      padding: theme.spacing.md,
    },
    text: {
      color: theme.color.textBody,
      fontSize: theme.typography.fontSize.base,
    },
  }));

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Themed Content</Text>
    </View>
  );
};

🏗️ Architecture Overview

The theme system consists of several key components:

• Theme Provider: Central theme management and configuration
• Theme Hooks: Utilities for accessing theme data
• Theme Types: TypeScript definitions for type safety
• GraphQL Integration: Theme data fetching from FPI
• Responsive Scaling: Automatic scaling for different screen sizes

🔧 Key Features

• Dynamic Theming: Real-time theme updates from server
• Type Safety: Full TypeScript support with typed theme properties
• Responsive Design: Automatic scaling for different screen sizes
• Color Palette: Comprehensive color system with variants
• Typography System: Complete typography configuration
• Spacing System: Consistent spacing scale
• Layout Configuration: Layout-specific theme properties

📖 Next Steps

Start with the Overview to understand the basic concepts, then dive into specific areas based on your needs:

• Developers: Focus on Theme Hooks and Customization
• Designers: Review Theme Types and Theme Fetching
• Architects: Check Theme Provider for implementation details

---

For questions or issues, please refer to the troubleshooting section in each document or create an issue in the repository.