From 7a220592248e895058adc75c9ba7c98353f7013c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 7 May 2026 19:33:54 +0000
Subject: [PATCH] feat: add backgroundColor property to CourierInboxTheme

Adds a new optional backgroundColor property to the CourierInboxTheme TypeScript
interface and bridges it to both native iOS and Android implementations.

Usage:
  const theme: CourierInboxTheme = {
    backgroundColor: '#0C111D',
    // ...other theme properties
  };

This allows users to customize the background color of the entire inbox view,
including tabs, message lists, and scroll areas on both platforms.

Requires corresponding changes in:
- trycourier/courier-ios (backgroundColor on CourierInboxTheme)
- trycourier/courier-android (backgroundColor on CourierInboxTheme)

Resolves #32

Co-authored-by: Mike Miller <mike@mikemiller.design>
---
 Docs/2_Inbox.md                                                 | 1 +
 .../main/java/com/courierreactnative/CourierInboxViewManager.kt | 2 ++
 ios/CourierInboxReactNativeManager.swift                        | 2 ++
 src/models/CourierInboxTheme.tsx                                | 1 +
 4 files changed, 6 insertions(+)

diff --git a/Docs/2_Inbox.md b/Docs/2_Inbox.md
index b2544db..c411690 100644
--- a/Docs/2_Inbox.md
+++ b/Docs/2_Inbox.md
@@ -140,6 +140,7 @@ const defaultFont = Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_reg
 
 const lightTheme: CourierInboxTheme = {
   brandId: "your_brand_id",
+  backgroundColor: '#FFFFFF',
   tabIndicatorColor: primaryColor,
   tabStyle: {
     selected: {
diff --git a/android/src/main/java/com/courierreactnative/CourierInboxViewManager.kt b/android/src/main/java/com/courierreactnative/CourierInboxViewManager.kt
index b7ae44b..74e32ca 100644
--- a/android/src/main/java/com/courierreactnative/CourierInboxViewManager.kt
+++ b/android/src/main/java/com/courierreactnative/CourierInboxViewManager.kt
@@ -119,6 +119,7 @@ class CourierInboxViewManager : SimpleViewManager<CourierInbox>() {
     val dividerItemDecoration = android?.getString("dividerItemDecoration")
 
     val brandId = getString("brandId")
+    val backgroundColor = getString("backgroundColor")
 
     val tabIndicatorColor = getString("tabIndicatorColor")
     val tabStyle = getMap("tabStyle")
@@ -139,6 +140,7 @@ class CourierInboxViewManager : SimpleViewManager<CourierInbox>() {
 
     return CourierInboxTheme(
       brandId = brandId,
+      backgroundColor = backgroundColor?.toColor(),
       tabIndicatorColor = tabIndicatorColor?.toColor(),
       tabStyle = tabStyle?.toTabStyle(context) ?: CourierStyles.Inbox.TabStyle(
         selected = CourierStyles.Inbox.TabItemStyle(
diff --git a/ios/CourierInboxReactNativeManager.swift b/ios/CourierInboxReactNativeManager.swift
index 93ec2b1..8c09665 100644
--- a/ios/CourierInboxReactNativeManager.swift
+++ b/ios/CourierInboxReactNativeManager.swift
@@ -314,6 +314,7 @@ internal extension NSDictionary {
         let defaultTheme = CourierInboxTheme()
         
         let brandId = self["brandId"] as? String
+        let backgroundColor = self["backgroundColor"] as? String
         let tabIndicatorColor = self["tabIndicatorColor"] as? String
         let tabStyle = self["tabStyle"] as? NSDictionary
         let readingSwipeActionStyle = self["readingSwipeActionStyle"] as? NSDictionary
@@ -332,6 +333,7 @@ internal extension NSDictionary {
         
         return CourierInboxTheme(
             brandId: brandId,
+            backgroundColor: backgroundColor?.toColor(),
             tabIndicatorColor: tabIndicatorColor?.toColor(),
             tabStyle: tabStyle?.toTabStyle() ?? CourierInboxView.defaultTabStyle(),
             readingSwipeActionStyle: readingSwipeActionStyle?.toReadingSwipeActionStyle() ?? CourierInboxView.defaultReadingStyle(),
diff --git a/src/models/CourierInboxTheme.tsx b/src/models/CourierInboxTheme.tsx
index b0e2ff9..4b25338 100644
--- a/src/models/CourierInboxTheme.tsx
+++ b/src/models/CourierInboxTheme.tsx
@@ -48,6 +48,7 @@ export interface CourierArchivingSwipeActionStyle {
 
 export interface CourierInboxTheme {
   brandId?: string;
+  backgroundColor?: string;
   tabIndicatorColor?: string;
   tabStyle?: CourierInboxTabStyle;
   readingSwipeActionStyle?: CourierReadingSwipeActionStyle;