---
schema_version: "1"
id: cde109a3270594e17bc3aa412db4572d1d6e49f9dbda584141192d809a66e447
title: iOS Theming Overview
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/genai/agentforce-mobile-sdk/references/ios/theming-overview-ios.md
canonical_url: https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/theming-overview-ios.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 23ece71dcd09a215add8f2d3d3680346f2e910352d6534218e50a5f706fa290c
products:
  - Agentforce Mobile SDK
  - Agentforce and Einstein Generative AI
---
# iOS Theming Overview

The Agentforce iOS SDK provides a comprehensive theming system that enables complete visual customization of the conversational AI interface. The theming system is built around a flexible, protocol-based architecture that supports dynamic theming, system integration, and custom brand implementations.

## Theming Architecture

The theming system is built on a protocol-based architecture that provides maximum flexibility and customization:

### Core Theming Classes

- **[AgentforceThemeManager](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-theme-manager-ios.md)** - Primary theme management interface combining theming capabilities with state observation
- **[AgentforceDefaultThemeManager](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-default-theme-manager-ios.md)** - Default implementation with standard Salesforce theming
- **[AgentforceThemeMode](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-theme-mode-ios.md)** - Theme mode configuration for light, dark, and system modes
- **[AgentforceColorToken](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-colors-ios.md)** - Type-safe enum of every color token, generic and per-component
- **[Color Token Reference](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-color-token-reference-ios.md)** - Every color token in the palette, with its default light and dark value

## Color System Architecture

The color system is built around semantic color tokens that provide consistent theming across all components:

### Color Categories

#### Surface Colors

- **`surface1`** / **`surface2`**: Primary view background colors
- **`surfaceContainer1`** / **`surfaceContainer2`** / **`surfaceContainer3`**: Component container backgrounds
- **`disabledContainer1`** / **`disabledContainer2`**: Disabled component backgrounds

#### Text Colors

- **`onSurface1`** / **`onSurface2`** / **`onSurface3`**: Text colors for different emphasis levels
- **`onDisabled1`** / **`onDisabled2`**: Text colors for disabled states

#### Accent Colors

- **`accent1`** / **`accent2`** / **`accent3`**: Interactive element colors
- **`accentContainer1`**: Branded component container backgrounds
- **`onAccent1`**: Text colors for accent containers

#### Feedback Colors

- **`error1`** / **`errorContainer1`** / **`onError1`**: Error state colors
- **`successContainer1`** / **`onSuccess1`**: Success state colors
- **`warningContainer1`** / **`onWarning1`**: Warning state colors
- **`info1`** / **`infoContainer1`**: Information state colors

#### Border Colors

- **`border1`** / **`border2`**: Decorative and functional border colors
- **`borderSuccess1`**: State-specific border color

#### Generic Foundation Colors

- **`brandBase50`** / **`brandBase70`** / **`brandBase90`**: Cosmos foundation colors

A number of generic tokens — including `errorBase50`, `feedbackWarning1`, `feedbackWarningContainer1`, `borderDisabled1`, `borderError1`, `borderInverse2`, and the three Generic Foundation Colors above — are declared by the shared design system but aren't currently read by any Agentforce view, so overriding them has no visible effect today. See the [Color Token Reference](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-color-token-reference-ios.md#generic-tokens) for the full list.

## Theme Mode System

The SDK supports multiple theme modes for different use cases:

### Light Mode

- **Optimized for**: Light backgrounds and bright environments
- **Color Contrast**: High contrast for readability
- **Brand Integration**: Consistent with light-themed applications

### Dark Mode

- **Optimized for**: Dark backgrounds and low-light environments
- **Eye Comfort**: Reduced eye strain in dark environments
- **Modern Aesthetics**: Contemporary dark theme design

### System Mode

- **Automatic Adaptation**: Follows iOS system appearance preferences
- **User Preference**: Respects user's system-wide theme choice
- **Dynamic Switching**: Real-time theme changes based on system settings

## Implementation Patterns

### Basic Theme Setup

Configure the default theme manager with your preferred theme mode for immediate theming support.

### Custom Theme Implementation

Implement custom theme managers that provide brand-specific colors and theming capabilities.

### Dynamic Theme Switching

Create theme controllers that enable real-time theme switching between light, dark, and system modes.

## Advanced Theming Features

### Reactive Updates

- **Observable State**: Real-time theme updates across all components
- **Automatic Propagation**: Theme changes automatically update all UI elements
- **Performance Optimized**: Efficient theme change handling without performance impact

### System Integration

- **iOS Appearance**: Full integration with iOS appearance system
- **Dynamic Type**: Integration with iOS Dynamic Type for text scaling

### Full Visual Customization

- **Colors**: Override generic or component-level color tokens
- **Icons**: Replace any of the 23 customizable icon slots, with optional light and dark variants
- **Consistent Theming**: Unified theming across all SDK components

## Theming Benefits

- **Brand Consistency**: Maintain consistent branding across all conversational AI interfaces
- **User Experience**: Provide familiar and comfortable visual experiences
- **Accessibility**: Support for accessibility requirements and preferences
- **Flexibility**: Easy customization for different use cases and requirements
- **Performance**: Optimized theming system with minimal performance impact

## Best Practices

- **Use Semantic Colors**: Leverage semantic color tokens for consistent theming
- **Test All Modes**: Verify theming across light, dark, and system modes
- **Accessibility**: Ensure proper contrast ratios and accessibility compliance
- **Brand Integration**: Maintain brand consistency while respecting user preferences
- **Performance**: Use efficient theme switching to avoid UI lag

## Next Steps

- **UI Components**: See [iOS UI Components](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/ui-components-ios.md) for component theming
- **Configuration**: See [AgentforceConfiguration](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/agentforce-configuration-ios.md) for theme setup
- **Integration**: See [iOS Development](https://developer.salesforce.com/docs/ai/agentforce-mobile-sdk/references/agentforce-mobile-sdk/development-ios.md) for architecture patterns