Skip to content

Add background color support to theme components#37

Draft
mikemilla wants to merge 1 commit intomainfrom
cursor/merge-prs-and-background-color-9483
Draft

Add background color support to theme components#37
mikemilla wants to merge 1 commit intomainfrom
cursor/merge-prs-and-background-color-9483

Conversation

@mikemilla
Copy link
Copy Markdown
Collaborator

Summary

This PR adds granular background color support to the theme system, enabling consumers to style backgrounds of individual UI sub-components (message cells, bottom sheets, and info views) rather than only the root container.

Context

Relates to courier-react-native#46 (bump courier-android to 5.3.1) and courier-react-native#45 (bump Courier_iOS to 5.8.1). Those PRs bump the native SDK dependency versions in the React Native wrapper.

Changes

SDK library (android/)

  • CourierInboxTheme: Added cellBackgroundColor: Int? property to control the background color of individual inbox message cells (previously hardcoded to ?android:colorBackground in XML)
  • CourierPreferencesTheme: Added sheetBackgroundColor: Int? property to control the background color of the preference topic bottom sheet
  • CourierStyles.InfoViewStyle: Added backgroundColor: Int? property to control the background color of info/empty/error state views
  • MessageItemViewHolder: Wired up cellBackgroundColor to set the cell container background
  • PreferenceTopicBottomSheet: Wired up sheetBackgroundColor to set the sheet root view background
  • CourierInfoView: Refactored into a shared applyInfoViewStyle() method that applies InfoViewStyle.backgroundColor, font, and button styling

Example app (app/)

  • Updated ComposeInboxActivity, StyledInboxFragment, and StyledPreferencesFragment to demonstrate the new background color properties

Usage

// Inbox with custom cell background
CourierInboxTheme(
    backgroundColor = Color.WHITE,
    cellBackgroundColor = Color.parseColor("#F5F5F5"),
    // ...
)

// Preferences with custom sheet background
CourierPreferencesTheme(
    backgroundColor = Color.WHITE,
    sheetBackgroundColor = Color.parseColor("#FAFAFA"),
    // ...
)

// Info view with custom background
CourierStyles.InfoViewStyle(
    font = CourierStyles.Font(),
    button = CourierStyles.Button(),
    backgroundColor = Color.parseColor("#F0F0F0"),
)

Testing

  • Library compiles clean (./gradlew :android:compileDebugKotlin)
  • All existing unit tests pass (./gradlew :android:testDebugUnitTest)
Open in Web Open in Cursor 

- Add cellBackgroundColor to CourierInboxTheme for per-cell background styling
- Add sheetBackgroundColor to CourierPreferencesTheme for bottom sheet backgrounds
- Add backgroundColor to InfoViewStyle for info/empty/error view backgrounds
- Wire up cellBackgroundColor in MessageItemViewHolder
- Wire up sheetBackgroundColor in PreferenceTopicBottomSheet
- Wire up InfoViewStyle.backgroundColor in CourierInfoView
- Refactor CourierInfoView to share styling logic via applyInfoViewStyle
- Update example app (Compose, StyledInbox, StyledPreferences) to use new props

Co-authored-by: Mike Miller <mike@mikemiller.design>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants