Theming and Styling

Relevant Source Files

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 src/components/SDKContainer.styled.ts33-43 src/constant.ts1-4

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 src/components/SDKContainer.tsx12-29 src/components/LinkConnect.tsx19-35

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 src/components/NavBar.tsx11-41 src/components/LinkConnect.tsx96-103

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

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 src/components/NavBar.tsx33-36

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 src/components/SDKContainer.tsx17-28