# Theming and Styling

## Relevant Source Files

- [src/__tests__/NavBar.test.tsx](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/__tests__/NavBar.test.tsx)
- [src/__tests__/SDKContainer.test.tsx](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/__tests__/SDKContainer.test.tsx)
- [src/components/LinkConnect.tsx](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/LinkConnect.tsx)
- [src/components/NavBar.tsx](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/NavBar.tsx)
- [src/components/SDKContainer.styled.ts](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.styled.ts)
- [src/components/SDKContainer.tsx](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.tsx)
- [src/constant.ts](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/constant.ts)

This document covers the theming and styling capabilities of the Mesh React Native SDK, including color schemes, component styling, and visual customization options. The SDK provides built-in support for light and dark themes with consistent styling across all UI components.

## Theme System Overview

The Mesh React Native SDK implements a comprehensive theming system that supports both light and dark color schemes. The theme system is controlled by the `isDarkTheme` boolean prop passed to the `LinkConnect` component and propagated throughout the component hierarchy.

### Theme Architecture

isDarkTheme prop
    LinkConnect Component
    Theme Context
    SDKContainer
    NavBar
    LoadingComponentWebview
    Theme Constants
    (constant.ts)
    Color Values
    LIGHT_THEME_COLOR_TOP
    DARK_THEME_COLOR_TOP
    LIGHT_THEME_COLOR_BOTTOM
    DARK_THEME_COLOR_BOTTOM
    useSDKStyles Hook
    Dynamic Style Generation
    navBarStyles
    statusBarStyle

Sources: [src/components/LinkConnect.tsx37-130](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/LinkConnect.tsx#L37-L130) [src/components/SDKContainer.styled.ts33-43](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.styled.ts#L33-L43) [src/constant.ts1-4](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/constant.ts#L1-L4)

## Color Constants

The SDK defines four primary color constants that form the foundation of the theming system:

| Constant | Value | Usage |
| --- | --- | --- |
| `LIGHT_THEME_COLOR_TOP` | `#F3F4F5` | Light theme navigation bar and top safe area |
| `DARK_THEME_COLOR_TOP` | `#1E1E24` | Dark theme navigation bar and top safe area |
| `LIGHT_THEME_COLOR_BOTTOM` | `#FBFBFB` | Light theme WebView background and bottom safe area |
| `DARK_THEME_COLOR_BOTTOM` | `#0E0D0D` | Dark theme WebView background and bottom safe area |

### Color Usage Flow

Color Constants
    (constant.ts)
    SDKContainer Component
    LinkConnect Component
    useSDKStyles Hook
    SafeAreaView Background
    StatusBar Background
    WebView Background
    Loading Component Background
    NavBar Background

Sources: [src/constant.ts1-4](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/constant.ts#L1-L4) [src/components/SDKContainer.tsx12-29](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.tsx#L12-L29) [src/components/LinkConnect.tsx19-35](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/LinkConnect.tsx#L19-L35)

## Theme-Aware Components

### SDKContainer Component

The `SDKContainer` component serves as the root container and handles theme-based styling for safe areas and status bar:

- **Top Safe Area**: Uses `LIGHT_THEME_COLOR_TOP` or `DARK_THEME_COLOR_TOP`
- **Bottom Safe Area**: Uses `LIGHT_THEME_COLOR_BOTTOM` or `DARK_THEME_COLOR_BOTTOM`
- **Status Bar**: Dynamically styled based on theme selection

### NavBar Component

The `NavBar` component demonstrates theme-aware asset management:

- **Background Color**: Applied via `useSDKStyles` hook
- **Icons**: Conditionally loads different assets based on `isDarkTheme` prop
  - Light theme: `chevron-left-light.png`, `cross-1-small-light.png`
  - Dark theme: `chevron-left-dark.png`, `cross-1-small-dark.png`

### WebView Integration

The WebView component applies theme-based background colors to ensure visual consistency:

- Uses `DARK_THEME_COLOR_BOTTOM` or `LIGHT_THEME_COLOR_BOTTOM` for WebView background
- Loading overlay matches WebView background color

Sources: [src/components/SDKContainer.tsx12-29](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.tsx#L12-L29) [src/components/NavBar.tsx11-41](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/NavBar.tsx#L11-L41) [src/components/LinkConnect.tsx96-103](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/LinkConnect.tsx#L96-L103)

## Styling Architecture

### useSDKStyles Hook

The `useSDKStyles` hook provides centralized style generation based on theme state:

isDarkTheme = true
    isDarkTheme = false
    useSDKStyles(isDarkTheme)
    Color Selection Logic
    DARK_THEME_COLOR_TOP
    LIGHT_THEME_COLOR_TOP
    Style Object Creation
    statusBarStyle
    navBarStyles
    createNavBarStyles()
    navBarContainer
    navBarImgContainer
    navBarImgButton
    navBarLogo

### Style Properties

The `createNavBarStyles` function generates a comprehensive style object with the following properties:

| Style Property | Purpose | Dynamic Values |
| --- | --- | --- |
| `navBarContainer` | Navigation bar layout and background | Background color based on theme |
| `navBarImgContainer` | Button container dimensions | Fixed dimensions (40x40) |
| `navBarImgButton` | Icon styling | Fixed dimensions (24x24) |
| `navBarLogo` | Logo styling | Fixed height (18px) |

Sources: [src/components/SDKContainer.styled.ts5-43](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.styled.ts#L5-L43)

## Asset Management

The SDK includes theme-specific assets that are conditionally loaded based on the current theme:

### Navigation Assets

| Asset File | Theme | Usage |
| --- | --- | --- |
| `chevron-left-light.png` | Light | Back button icon |
| `chevron-left-dark.png` | Dark | Back button icon |
| `cross-1-small-light.png` | Light | Close button icon |
| `cross-1-small-dark.png` | Dark | Close button icon |

### Asset Loading Pattern

The NavBar component demonstrates the conditional asset loading pattern:

source={isDarkTheme
      ? require('../assets/chevron-left-dark.png')
      : require('../assets/chevron-left-light.png')}

Sources: [src/components/NavBar.tsx20-24](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/NavBar.tsx#L20-L24) [src/components/NavBar.tsx33-36](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/NavBar.tsx#L33-L36)

## Implementation Details

### Theme Propagation

Theme information flows through the component hierarchy as follows:
1. **LinkConnect Component**: Receives theme configuration and determines `isDarkTheme` state
2. **Component Props**: Theme state passed as `isDarkTheme` boolean prop
3. **Style Hooks**: `useSDKStyles` hook generates theme-appropriate styles
4. **Asset Selection**: Components conditionally load theme-specific assets

### Loading States

The SDK provides theme-consistent loading states through the `LoadingComponentWebview` component, which uses absolute positioning and theme-appropriate background colors to create seamless loading experiences.

### Container Hierarchy

isDarkTheme prop
    SDKWrapperComponent
    (SDKContainer | SDKViewContainer)
    SafeAreaView (Top)
    SafeAreaView (Main)
    SafeAreaView (Bottom)
    StatusBar
    Component Children
    NavBar (conditional)
    LoadingComponentWebview (conditional)
    WebView (conditional)
    Theme Color Constants

Sources: [src/components/LinkConnect.tsx70-130](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/LinkConnect.tsx#L70-L130) [src/components/SDKContainer.tsx17-28](https://github.com/FrontFin/mesh-react-native-sdk/blob/e6a52da8/src/components/SDKContainer.tsx#L17-L28)