Skip to content

fix: advanced theming of message (myMessageTheme) - #3759

Merged
isekovanic merged 7 commits into
developfrom
fix-my-message-theming
Aug 7, 2026
Merged

fix: advanced theming of message (myMessageTheme)#3759
isekovanic merged 7 commits into
developfrom
fix-my-message-theming

Conversation

@szuperaz

@szuperaz szuperaz commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

🎯 Goal

fixes #3755

Allow using light-on-dark for outgoing messages; and dark-on-light for outgoing messages. To achieve this, it's not enough to customize theme tokens; we have to use myMessageTheme to provide a completely separate theme for outgoing messages only. This is a preexsting mechanism in the SDK; but had a few small issues preventing working correctly. To verify a new cookbook is added: https://github.com/GetStream/docs-content/pull/1490

πŸ›  Implementation details

There were a few different theming issues here; all fixed in a separate commit in this PR:

  • The theme merging wiped preexisting custom semantics, causing problems when doing theme overrides on different levels (which is what is used with myMessageTheme)
  • Message list components didn't provide the current scheme (light/dark) when merging the myMessageTheme
  • A various number of components used incmoing semantic tokens instead of reading isMyMessages and selecting incoming/outgoing token based on that
  • Quoted message was styled based on if qouted message was sent by current user; instead of parent message was sent by current user -> this didn't cause a UI issue with the default theme; but visible when using different text colors for incoming/outgoing texts
  • The default UI visibly changed on three places; all of them are verified by figma (see screenshots later):
  1. The SDK unnecessarily changed failed/moderated outgoing messages background to incoming
  2. When editing a message the original in the composer was always styled as incoming not outgoing
  3. Opening our own poll in the poll modal used an inaccurate color for the vote circle

🎨 UI Changes

Before - failed outgoing message background changed to incoming:
IMG_1870

After - in line with Figma:
IMG_1900

Before - editing our own message styled as incmoing in composer:
IMG_1867 2

After - in line with Figma:
IMG_1868

Before - poll modal vote circle inaccurate color:
IMG_1866 3

After - in line with Figma:
IMG_1869

πŸ§ͺ Testing

β˜‘οΈ Checklist

  • I have signed the Stream CLA (required)
  • PR targets the develop branch
  • Documentation is updated
  • New code is tested in main example apps, including all possible scenarios
    • SampleApp iOS and Android
    • Expo iOS and Android

@Stream-SDK-Bot

Stream-SDK-Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

SDK Size

title develop branch diff status
js_bundle_size 1991 KB 1991 KB +488 B 🟑

@szuperaz
szuperaz force-pushed the fix-my-message-theming branch from b5a8f9d to 143f441 Compare August 6, 2026 15:26
@szuperaz
szuperaz force-pushed the fix-my-message-theming branch from 143f441 to cde040f Compare August 6, 2026 17:22
@szuperaz szuperaz changed the title Fix my message theming fix: advanced theming of message (myMessageTheme) Aug 7, 2026
@szuperaz
szuperaz requested a review from isekovanic August 7, 2026 13:25
@szuperaz
szuperaz marked this pull request as ready for review August 7, 2026 13:25
@isekovanic
isekovanic merged commit 58b3dbe into develop Aug 7, 2026
8 checks passed
@isekovanic
isekovanic deleted the fix-my-message-theming branch August 7, 2026 20:31
@github-actions github-actions Bot mentioned this pull request Aug 7, 2026
12 tasks
@stream-ci-bot

Copy link
Copy Markdown
Contributor

πŸŽ‰ This PR is included in version 9.7.4 πŸŽ‰

The release is available on:

Your semantic-release bot πŸ“¦πŸš€

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[πŸ›] πŸ”₯ Missing incoming/outgoing semantics prop for audio message components

4 participants