fix: sender and receiver message theme colors (#2767)

Author: khushal87

docusaurus/docs/reactnative/basics/migrating-from-5.x-to-6.x.mdx

@@ -198,6 +198,12 @@ The type of `quotedMessage` is changed from `MessageType |  boolean` to `Message
 
 ### Refactor of theme object
 
+The color of the sender and receiver messages are now changed to `light_blue` and `light_gray` keys respectively.
+
+:::note
+Please configure the `light_blue` and `light_gray` keys in the theme object to customize the sender and receiver messages for dark and light mode.
+:::
+
 The default theme object has been refactored to provide a better customization experience. The theme object is now more organized and provides better control over the customization. You can check the object [here](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/utils/theme.ts).
 
 ### Remove the deprecated code

examples/ExpoMessaging/useStreamChatTheme.ts

@@ -27,6 +27,8 @@ export const useStreamChatTheme = () => {
             grey_gainsboro: '#2D2F2F',
             grey_whisper: '#1C1E22',
             icon_background: '#FFFFFF',
+            light_blue: '#001333',
+            light_gray: '#1C1E22',
             modal_shadow: '#000000',
             overlay: '#FFFFFFCC', // CC = 80% opacity
             shadow_icon: '#00000080', // 80 = 50% opacity
@@ -50,6 +52,8 @@ export const useStreamChatTheme = () => {
             grey_gainsboro: '#DBDBDB',
             grey_whisper: '#ECEBEB',
             icon_background: '#FFFFFF',
+            light_blue: '#E0F0FF',
+            light_gray: '#E9EAED',
             modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
             overlay: '#00000099', // 99 = 60% opacity
             shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4

examples/SampleApp/src/hooks/useStreamChatTheme.ts

@@ -21,6 +21,8 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
           grey_gainsboro: '#2D2F2F',
           grey_whisper: '#1C1E22',
           icon_background: '#FFFFFF',
+          light_blue: '#001333',
+          light_gray: '#1C1E22',
           modal_shadow: '#000000',
           overlay: '#FFFFFFCC', // CC = 80% opacity
           shadow_icon: '#00000080', // 80 = 50% opacity
@@ -47,6 +49,8 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
           grey_gainsboro: '#DBDBDB',
           grey_whisper: '#ECEBEB',
           icon_background: '#FFFFFF',
+          light_blue: '#E0F0FF',
+          light_gray: '#E9EAED',
           modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
           overlay: '#00000099', // 99 = 60% opacity
           shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4

examples/TypeScriptMessaging/useStreamChatTheme.ts

@@ -25,7 +25,8 @@ const getChatStyle = (colorScheme: string): DeepPartial<Theme> => ({
           grey_gainsboro: '#2D2F2F',
           grey_whisper: '#1C1E22',
           icon_background: '#FFFFFF',
-          light_gray: '#272A30',
+          light_blue: '#001333',
+          light_gray: '#1C1E22',
           modal_shadow: '#000000',
           overlay: '#FFFFFFCC', // CC = 80% opacity
           shadow_icon: '#00000080', // 80 = 50% opacity
@@ -49,7 +50,8 @@ const getChatStyle = (colorScheme: string): DeepPartial<Theme> => ({
           grey_gainsboro: '#DBDBDB',
           grey_whisper: '#ECEBEB',
           icon_background: '#FFFFFF',
-          light_gray: '#DBDDE1',
+          light_blue: '#E0F0FF',
+          light_gray: '#E9EAED',
           modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
           overlay: '#00000099', // 99 = 60% opacity
           shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -104,7 +104,7 @@ const MessageSimpleWithContext = <
 
   const {
     theme: {
-      colors: { blue_alice, grey_gainsboro, transparent },
+      colors: { blue_alice, grey_gainsboro, light_blue, light_gray, transparent },
       messageSimple: {
         container,
         content: {
@@ -160,7 +160,7 @@ const MessageSimpleWithContext = <
     }
   }
 
-  let backgroundColor = senderMessageBackgroundColor;
+  let backgroundColor = senderMessageBackgroundColor ?? light_blue;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = transparent;
   } else if (otherAttachments.length) {
@@ -170,7 +170,7 @@ const MessageSimpleWithContext = <
       backgroundColor = blue_alice;
     }
   } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = receiverMessageBackgroundColor;
+    backgroundColor = receiverMessageBackgroundColor ?? light_gray;
   }
 
   const repliesCurveColor = isMessageReceivedOrErrorType ? grey_gainsboro : backgroundColor;

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -440,7 +440,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "borderWidth": 1,
                                   },
                                   {
-                                    "backgroundColor": "#DBDBDB",
+                                    "backgroundColor": "#E9EAED",
                                     "borderBottomLeftRadius": 0,
                                     "borderBottomRightRadius": 16,
                                     "borderColor": "#ECEBEB",
@@ -788,7 +788,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "borderWidth": 1,
                                   },
                                   {
-                                    "backgroundColor": "#DBDBDB",
+                                    "backgroundColor": "#E9EAED",
                                     "borderBottomLeftRadius": 0,
                                     "borderBottomRightRadius": 16,
                                     "borderColor": "#ECEBEB",
@@ -1136,7 +1136,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "borderWidth": 1,
                                   },
                                   {
-                                    "backgroundColor": "#DBDBDB",
+                                    "backgroundColor": "#E9EAED",
                                     "borderBottomLeftRadius": 0,
                                     "borderBottomRightRadius": 16,
                                     "borderColor": "#ECEBEB",
@@ -1518,7 +1518,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         "borderWidth": 1,
                                       },
                                       {
-                                        "backgroundColor": "#DBDBDB",
+                                        "backgroundColor": "#E9EAED",
                                         "borderBottomLeftRadius": 0,
                                         "borderBottomRightRadius": 16,
                                         "borderColor": "#ECEBEB",

package/src/contexts/themeContext/utils/theme.ts

@@ -27,7 +27,7 @@ export const Colors = {
   icon_background: '#FFFFFF',
   label_bg_transparent: '#00000033', // 33 = 20% opacity
   light_blue: '#E0F0FF',
-  light_gray: '#DBDDE1',
+  light_gray: '#E9EAED',
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
   overlay: '#000000CC', // CC = 80% opacity
   shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
@@ -1271,10 +1271,8 @@ export const defaultTheme: Theme = {
       metaText: {
         fontSize: 12,
       },
-      receiverMessageBackgroundColor: Colors.grey_gainsboro,
       replyBorder: {},
       replyContainer: {},
-      senderMessageBackgroundColor: Colors.light_blue,
       textContainer: {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },