Branding and Theming

The Agentforce Android SDK provides comprehensive theming capabilities for customizing the visual appearance of all UI components.

Theme System 

The Agentforce Android SDK includes a sophisticated theming system built on top of Salesforce’s design system. The theming system provides:

  • Color Theming: Complete color palette customization with semantic tokens
  • Light/Dark Mode Support: Automatic switching and explicit mode setting
  • System Integration: Adapts to Android system theme preferences
  • Reactive Updates: Composable state management for real-time theme changes

Key Components 

  • AgentforceThemeManager: Central theme management interface
  • AgentforceColors: Class for color palettes with semantic color tokens
  • AgentforceDarkColors: Dark mode color variants
  • AgentforceThemeCreator: Factory for creating theme objects
  • DefaultAgentforceTheme: Default theme object with Agentforce colors

Color Tokens 

The theming system provides comprehensive color tokens organized by purpose.

Agentforce Mobile SDK Branding

Surface Colors 

  • surface1: Primary view background
  • surface2: Secondary view background
  • surfaceContainer1: Default container background (cards, modals)
  • surfaceContainer2: Darker container background
  • surfaceContainer3: Darkest container background

Text and Icon Colors 

  • onSurface1: Lightest text/icon fill (body text, labels)
  • onSurface2: Darker text/icon fill (headings, input fields)
  • onSurface3: Additional text/icon variant

Accent Colors 

  • accent1: Button icons and interactive elements
  • accent2: Links, hover states, primary actions
  • accent3: Selected states
  • accentContainer1: Branded button backgrounds
  • onAccent1: Text/icons on accent containers

Feedback Colors 

  • error1: Error text and icons
  • errorContainer1: Error alert backgrounds
  • onError1: Text on error containers
  • borderError1: Error button borders
  • successContainer1: Success alert backgrounds
  • onSuccess1: Success text and icons
  • borderSuccess1: Success button borders

State Colors 

  • disabledContainer1: Disabled white component backgrounds
  • disabledContainer2: Disabled dark component backgrounds
  • onDisabled1: Text on light disabled containers
  • onDisabled2: Text on dark disabled containers

Brand Colors 

  • brandBase50: Primary brand color
  • errorBase50: Error brand color
  • feedbackWarning1: Warning text color
  • feedbackWarningContainer1: Warning container background
  • info1: Information text color
  • infoContainer1: Information container background

Implementation 

The following sections show how to implement theming in your Android application.

Default Theme Setup 

1import com.salesforce.android.agentforcesdkimpl.AgentforceThemeCreator
2import com.salesforce.android.agentforcesdkimpl.DefaultAgentforceTheme
3
4// Get default theme
5val defaultTheme = AgentforceThemeCreator.getDefaultTheme()
6
7// Use in configuration
8val configuration = AgentforceConfiguration.builder(authCredentialProvider)
9    .setSalesforceDomain("https://your-domain.my.salesforce.com")
10    .setAgentId("YOUR_AGENT_ID")
11    .setTheme(defaultTheme)
12    .build()

Customize Colors Using Copy Function 

1class YourApp : Application() {
2    override fun onCreate() {
3        super.onCreate()
4
5        // Copy and modify default colors
6        val myLightColors = AgentforceColors.copy(
7            accent1 = Color(0xFF1E88E5),
8            accent2 = Color(0xFF1976D2),
9            accentContainer1 = Color(0xFFBBDEFB),
10            surface1 = Color(0xFFFAFAFA)
11        )
12
13        val myDarkColors = AgentforceDarkColors.copy(
14            accent1 = Color(0xFF64B5F6),
15            accent2 = Color(0xFF42A5F5),
16            accentContainer1 = Color(0xFF0D47A1),
17            surface1 = Color(0xFF121212)
18        )
19
20        // Create theme manager with custom colors
21        val themeManager = createCustomAgentforceThemeManager(
22            lightColors = myLightColors,
23            darkColors = myDarkColors,
24            themeMode = AgentforceThemeMode.SYSTEM
25        )
26
27        AgentforcePlugin.initialize(
28            context = this,
29            themeManager = themeManager
30        )
31    }
32}

Complete Brand Customization 

1// Create completely custom colors
2val customLightColors = AgentforceColors(
3    // Surface colors
4    surface1 = Color(0xFFFFFFFF),
5    surface2 = Color(0xFFF5F5F5),
6    surfaceContainer1 = Color(0xFFFFFFFF),
7    surfaceContainer2 = Color(0xFFEEEEEE),
8    surfaceContainer3 = Color(0xFFE0E0E0),
9
10    // Text colors
11    onSurface1 = Color(0xFF212121),
12    onSurface2 = Color(0xFF424242),
13    onSurface3 = Color(0xFF757575),
14
15    // Accent colors
16    accent1 = Color(0xFF2196F3),
17    accent2 = Color(0xFF1976D2),
18    accent3 = Color(0xFF0D47A1),
19    accentContainer1 = Color(0xFFE3F2FD),
20    onAccent1 = Color(0xFFFFFFFF),
21
22    // Feedback colors
23    error1 = Color(0xFFD32F2F),
24    errorContainer1 = Color(0xFFFFEBEE),
25    onError1 = Color(0xFFFFFFFF),
26    borderError1 = Color(0xFFD32F2F),
27    successContainer1 = Color(0xFFE8F5E8),
28    onSuccess1 = Color(0xFF2E7D32),
29    borderSuccess1 = Color(0xFF4CAF50),
30
31    // State colors
32    disabledContainer1 = Color(0xFFF5F5F5),
33    disabledContainer2 = Color(0xFF424242),
34    onDisabled1 = Color(0xFF9E9E9E),
35    onDisabled2 = Color(0xFF616161),
36
37    // Brand colors
38    brandBase50 = Color(0xFF2196F3),
39    errorBase50 = Color(0xFFD32F2F),
40    feedbackWarning1 = Color(0xFFFF9800),
41    feedbackWarningContainer1 = Color(0xFFFFF3E0),
42    info1 = Color(0xFF2196F3),
43    infoContainer1 = Color(0xFFE3F2FD)
44)
45
46val customDarkColors = AgentforceDarkColors(
47    // Dark mode variants
48    surface1 = Color(0xFF121212),
49    surface2 = Color(0xFF1E1E1E),
50    surfaceContainer1 = Color(0xFF2C2C2C),
51    surfaceContainer2 = Color(0xFF3C3C3C),
52    surfaceContainer3 = Color(0xFF4C4C4C),
53
54    onSurface1 = Color(0xFFE0E0E0),
55    onSurface2 = Color(0xFFB0B0B0),
56    onSurface3 = Color(0xFF808080),
57
58    accent1 = Color(0xFF64B5F6),
59    accent2 = Color(0xFF42A5F5),
60    accent3 = Color(0xFF1E88E5),
61    accentContainer1 = Color(0xFF0D47A1),
62    onAccent1 = Color(0xFF000000),
63
64    // ... other dark colors
65)
66
67// Create custom theme
68val customTheme = AgentforceThemeCreator.createCustomTheme(
69    colors = customLightColors,
70    darkColors = customDarkColors
71)

Feature Flag-Based Theming 

1class ThemingFeatureFlag {
2    companion object {
3        fun isCustomThemingEnabled(): Boolean {
4            // Check your feature flag system
5            return FeatureFlagManager.isEnabled("custom_theming")
6        }
7    }
8}
9
10// Conditional theme setup
11val theme = if (ThemingFeatureFlag.isCustomThemingEnabled()) {
12    AgentforceThemeCreator.createCustomTheme(
13        colors = myLightColors,
14        darkColors = myDarkColors
15    )
16} else {
17    AgentforceThemeCreator.getDefaultTheme()
18}

Limitations 

Important: Currently, only color theming is supported. Fonts, dimensions, and shapes are not yet implemented in the theming system.

Best Practices 

The following best practices ensure effective theming implementation.

  1. Use Semantic Colors: Always use semantic color tokens rather than hardcoded colors
  2. Test Both Modes: Ensure your custom colors work well in both light and dark modes
  3. System Integration: Use AgentforceThemeMode.SYSTEM to respect user preferences
  4. Copy Function: Use the copy() function to modify existing colors rather than creating from scratch
  5. Accessibility: Ensure sufficient color contrast for accessibility compliance
  6. Feature Flags: Use feature flags to gradually roll out custom theming

Next Steps