Merge pull request #515 from GetStream/feat/colorNames

feat: color names [CDS-324]

packages/stream_chat_flutter/example/lib/tutorial-part-3.dart

@@ -101,12 +101,12 @@ class ChannelListPage extends StatelessWidget {
             StreamChatTheme.of(context).channelPreviewTheme.title!.copyWith(
                   color: StreamChatTheme.of(context)
                       .colorTheme
-                      .black
+                      .textHighEmphasis
                       .withOpacity(opacity),
                 ),
       ),
       subtitle: Text(subtitle),
-      trailing: channel.state!.unreadCount! > 0
+      trailing: channel.state!.unreadCount > 0
           ? CircleAvatar(
               radius: 10,
               child: Text(channel.state!.unreadCount.toString()),

packages/stream_chat_flutter/example/lib/tutorial-part-6.dart

@@ -50,9 +50,9 @@ class MyApp extends StatelessWidget {
         ),
       ),
       otherMessageTheme: MessageTheme(
-        messageBackgroundColor: colorTheme.black,
+        messageBackgroundColor: colorTheme.textHighEmphasis,
         messageText: TextStyle(
-          color: colorTheme.white,
+          color: colorTheme.barsBg,
         ),
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(8),

packages/stream_chat_flutter/lib/src/attachment/attachment_title.dart

@@ -35,7 +35,7 @@ class AttachmentTitle extends StatelessWidget {
                   attachment.title!,
                   overflow: TextOverflow.ellipsis,
                   style: messageTheme.messageText?.copyWith(
-                    color: StreamChatTheme.of(context).colorTheme.accentBlue,
+                    color: StreamChatTheme.of(context).colorTheme.accentPrimary,
                     fontWeight: FontWeight.bold,
                   ),
                 ),

packages/stream_chat_flutter/lib/src/attachment/attachment_upload_state_builder.dart

@@ -129,7 +129,7 @@ class _PreparingState extends StatelessWidget {
           alignment: Alignment.topRight,
           child: _IconButton(
             icon: StreamSvgIcon.close(
-              color: StreamChatTheme.of(context).colorTheme.white,
+              color: StreamChatTheme.of(context).colorTheme.barsBg,
             ),
             onPressed: () => channel.cancelAttachmentUpload(attachmentId),
           ),
@@ -169,7 +169,7 @@ class _InProgressState extends StatelessWidget {
           alignment: Alignment.topRight,
           child: _IconButton(
             icon: StreamSvgIcon.close(
-              color: StreamChatTheme.of(context).colorTheme.white,
+              color: StreamChatTheme.of(context).colorTheme.barsBg,
             ),
             onPressed: () => channel.cancelAttachmentUpload(attachmentId),
           ),
@@ -208,7 +208,7 @@ class _FailedState extends StatelessWidget {
       children: [
         _IconButton(
           icon: StreamSvgIcon.retry(
-            color: theme.colorTheme.white,
+            color: theme.colorTheme.barsBg,
           ),
           onPressed: () {
             channel.retryAttachmentUpload(messageId, attachmentId);
@@ -228,7 +228,7 @@ class _FailedState extends StatelessWidget {
               child: Text(
                 'UPLOAD ERROR',
                 style: theme.textTheme.footnote.copyWith(
-                  color: theme.colorTheme.white,
+                  color: theme.colorTheme.barsBg,
                 ),
               ),
             ),
@@ -247,7 +247,7 @@ class _SuccessState extends StatelessWidget {
           backgroundColor: StreamChatTheme.of(context).colorTheme.overlayDark,
           maxRadius: 12,
           child: StreamSvgIcon.check(
-            color: StreamChatTheme.of(context).colorTheme.white,
+            color: StreamChatTheme.of(context).colorTheme.barsBg,
           ),
         ),
       );

packages/stream_chat_flutter/lib/src/attachment/attachment_widget.dart

@@ -75,12 +75,14 @@ class AttachmentError extends StatelessWidget {
         child: Container(
           width: size?.width,
           height: size?.height,
-          color:
+          color: StreamChatTheme.of(context)
-              StreamChatTheme.of(context).colorTheme.accentRed.withOpacity(.1),
+              .colorTheme
+              .accentError
+              .withOpacity(.1),
           child: Center(
             child: Icon(
               Icons.error_outline,
-              color: StreamChatTheme.of(context).colorTheme.black,
+              color: StreamChatTheme.of(context).colorTheme.textHighEmphasis,
             ),
           ),
         ),

packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart

@@ -54,10 +54,10 @@ class FileAttachment extends AttachmentWidget {
           width: size?.width ?? 100,
           height: 56,
           decoration: BoxDecoration(
-            color: colorTheme.white,
+            color: colorTheme.barsBg,
             borderRadius: BorderRadius.circular(12),
             border: Border.all(
-              color: colorTheme.greyWhisper,
+              color: colorTheme.borders,
             ),
           ),
           child: Row(
@@ -141,8 +141,8 @@ class FileAttachment extends AttachmentWidget {
 
                 final colorTheme = StreamChatTheme.of(context).colorTheme;
                 return Shimmer.fromColors(
-                  baseColor: colorTheme.greyGainsboro,
+                  baseColor: colorTheme.disabled,
-                  highlightColor: colorTheme.whiteSmoke,
+                  highlightColor: colorTheme.inputBg,
                   child: image,
                 );
               },
@@ -217,7 +217,7 @@ class FileAttachment extends AttachmentWidget {
       preparing: () => Padding(
         padding: const EdgeInsets.all(8),
         child: _buildButton(
-          icon: StreamSvgIcon.close(color: theme.colorTheme.white),
+          icon: StreamSvgIcon.close(color: theme.colorTheme.barsBg),
           fillColor: theme.colorTheme.overlayDark,
           onPressed: () => channel.cancelAttachmentUpload(attachmentId),
         ),
@@ -225,7 +225,7 @@ class FileAttachment extends AttachmentWidget {
       inProgress: (_, __) => Padding(
         padding: const EdgeInsets.all(8),
         child: _buildButton(
-          icon: StreamSvgIcon.close(color: theme.colorTheme.white),
+          icon: StreamSvgIcon.close(color: theme.colorTheme.barsBg),
           fillColor: theme.colorTheme.overlayDark,
           onPressed: () => channel.cancelAttachmentUpload(attachmentId),
         ),
@@ -233,15 +233,15 @@ class FileAttachment extends AttachmentWidget {
       success: () => Padding(
         padding: const EdgeInsets.all(8),
         child: CircleAvatar(
-          backgroundColor: theme.colorTheme.accentBlue,
+          backgroundColor: theme.colorTheme.accentPrimary,
           maxRadius: 12,
-          child: StreamSvgIcon.check(color: theme.colorTheme.white),
+          child: StreamSvgIcon.check(color: theme.colorTheme.barsBg),
         ),
       ),
       failed: (_) => Padding(
         padding: const EdgeInsets.all(8),
         child: _buildButton(
-          icon: StreamSvgIcon.retry(color: theme.colorTheme.white),
+          icon: StreamSvgIcon.retry(color: theme.colorTheme.barsBg),
           fillColor: theme.colorTheme.overlayDark,
           onPressed: () => channel.retryAttachmentUpload(
             message.id,
@@ -253,7 +253,8 @@ class FileAttachment extends AttachmentWidget {
 
     if (message.status == MessageSendingStatus.sent) {
       trailingWidget = IconButton(
-        icon: StreamSvgIcon.cloudDownload(color: theme.colorTheme.black),
+        icon: StreamSvgIcon.cloudDownload(
+            color: theme.colorTheme.textHighEmphasis),
         visualDensity: VisualDensity.compact,
         splashRadius: 16,
         onPressed: () {
@@ -272,7 +273,7 @@ class FileAttachment extends AttachmentWidget {
     final theme = StreamChatTheme.of(context);
     final size = attachment.file?.size ?? attachment.extraData['file_size'];
     final textStyle = theme.textTheme.footnote.copyWith(
-      color: theme.colorTheme.grey,
+      color: theme.colorTheme.textLowEmphasis,
     );
     return attachment.uploadState.when(
       preparing: () => Text(fileSize(size), style: textStyle),
@@ -282,7 +283,7 @@ class FileAttachment extends AttachmentWidget {
         showBackground: false,
         padding: EdgeInsets.zero,
         textStyle: textStyle,
-        progressIndicatorColor: theme.colorTheme.accentBlue,
+        progressIndicatorColor: theme.colorTheme.accentPrimary,
       ),
       success: () => Text(fileSize(size), style: textStyle),
       failed: (_) => Text('UPLOAD ERROR', style: textStyle),

packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart

@@ -51,7 +51,7 @@ class GiphyAttachment extends AttachmentWidget {
       mainAxisSize: MainAxisSize.min,
       children: [
         Card(
-          color: StreamChatTheme.of(context).colorTheme.white,
+          color: StreamChatTheme.of(context).colorTheme.barsBg,
           elevation: 2,
           clipBehavior: Clip.hardEdge,
           shape: const RoundedRectangleBorder(
@@ -83,7 +83,7 @@ class GiphyAttachment extends AttachmentWidget {
                           style: TextStyle(
                             color: StreamChatTheme.of(context)
                                 .colorTheme
-                                .black
+                                .textHighEmphasis
                                 .withOpacity(0.5),
                           ),
                           overflow: TextOverflow.ellipsis,
@@ -117,7 +117,7 @@ class GiphyAttachment extends AttachmentWidget {
               Container(
                 color: StreamChatTheme.of(context)
                     .colorTheme
-                    .black
+                    .textHighEmphasis
                     .withOpacity(0.2),
                 width: double.infinity,
                 height: 0.5,
@@ -141,7 +141,7 @@ class GiphyAttachment extends AttachmentWidget {
                               .copyWith(
                                 color: StreamChatTheme.of(context)
                                     .colorTheme
-                                    .black
+                                    .textHighEmphasis
                                     .withOpacity(0.5),
                               ),
                         ),
@@ -152,7 +152,7 @@ class GiphyAttachment extends AttachmentWidget {
                     width: 0.5,
                     color: StreamChatTheme.of(context)
                         .colorTheme
-                        .black
+                        .textHighEmphasis
                         .withOpacity(0.2),
                     height: 50,
                   ),
@@ -173,7 +173,7 @@ class GiphyAttachment extends AttachmentWidget {
                               .copyWith(
                                 color: StreamChatTheme.of(context)
                                     .colorTheme
-                                    .black
+                                    .textHighEmphasis
                                     .withOpacity(0.5),
                               ),
                           maxLines: 1,
@@ -185,7 +185,7 @@ class GiphyAttachment extends AttachmentWidget {
                     width: 0.5,
                     color: StreamChatTheme.of(context)
                         .colorTheme
-                        .black
+                        .textHighEmphasis
                         .withOpacity(0.2),
                     height: 50,
                   ),
@@ -203,7 +203,7 @@ class GiphyAttachment extends AttachmentWidget {
                           style: TextStyle(
                             color: StreamChatTheme.of(context)
                                 .colorTheme
-                                .accentBlue,
+                                .accentPrimary,
                             fontWeight: FontWeight.bold,
                           ),
                         ),
@@ -226,7 +226,7 @@ class GiphyAttachment extends AttachmentWidget {
                 StreamSvgIcon.eye(
                   color: StreamChatTheme.of(context)
                       .colorTheme
-                      .black
+                      .textHighEmphasis
                       .withOpacity(0.5),
                   size: 16,
                 ),
@@ -241,7 +241,7 @@ class GiphyAttachment extends AttachmentWidget {
                       .copyWith(
                           color: StreamChatTheme.of(context)
                               .colorTheme
-                              .black
+                              .textHighEmphasis
                               .withOpacity(0.5)),
                 ),
               ],
@@ -306,8 +306,8 @@ class GiphyAttachment extends AttachmentWidget {
 
                   final colorTheme = StreamChatTheme.of(context).colorTheme;
                   return Shimmer.fromColors(
-                    baseColor: colorTheme.greyGainsboro,
+                    baseColor: colorTheme.disabled,
-                    highlightColor: colorTheme.whiteSmoke,
+                    highlightColor: colorTheme.inputBg,
                     child: image,
                   );
                 },
@@ -322,7 +322,7 @@ class GiphyAttachment extends AttachmentWidget {
                 child: Material(
                   color: StreamChatTheme.of(context)
                       .colorTheme
-                      .black
+                      .textHighEmphasis
                       .withOpacity(.5),
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(12),
@@ -335,13 +335,14 @@ class GiphyAttachment extends AttachmentWidget {
                     child: Row(
                       children: [
                         StreamSvgIcon.lightning(
-                          color: StreamChatTheme.of(context).colorTheme.white,
+                          color: StreamChatTheme.of(context).colorTheme.barsBg,
                           size: 16,
                         ),
                         Text(
                           'GIPHY',
                           style: TextStyle(
-                            color: StreamChatTheme.of(context).colorTheme.white,
+                            color:
+                                StreamChatTheme.of(context).colorTheme.barsBg,
                             fontWeight: FontWeight.bold,
                             fontSize: 11,
                           ),

packages/stream_chat_flutter/lib/src/attachment/image_attachment.dart

@@ -103,8 +103,8 @@ class ImageAttachment extends AttachmentWidget {
                 );
                 final colorTheme = StreamChatTheme.of(context).colorTheme;
                 return Shimmer.fromColors(
-                  baseColor: colorTheme.greyGainsboro,
+                  baseColor: colorTheme.disabled,
-                  highlightColor: colorTheme.whiteSmoke,
+                  highlightColor: colorTheme.inputBg,
                   child: image,
                 );
               },

packages/stream_chat_flutter/lib/src/attachment_actions_modal.dart

@@ -72,7 +72,7 @@ class AttachmentActionsModal extends StatelessWidget {
                     'Reply',
                     StreamSvgIcon.iconCurveLineLeftUp(
                       size: 24,
-                      color: theme.colorTheme.grey,
+                      color: theme.colorTheme.textLowEmphasis,
                     ),
                     () {
                       Navigator.pop(context, ReturnActionType.reply);
@@ -83,7 +83,7 @@ class AttachmentActionsModal extends StatelessWidget {
                     'Show in Chat',
                     StreamSvgIcon.eye(
                       size: 24,
-                      color: theme.colorTheme.black,
+                      color: theme.colorTheme.textHighEmphasis,
                     ),
                     onShowMessage,
                   ),
@@ -93,7 +93,7 @@ class AttachmentActionsModal extends StatelessWidget {
                     'Save ${message.attachments[currentIndex].type == 'video' ? 'Video' : 'Image'}',
                     StreamSvgIcon.iconSave(
                       size: 24,
-                      color: theme.colorTheme.grey,
+                      color: theme.colorTheme.textLowEmphasis,
                     ),
                     () {
                       final attachment = message.attachments[currentIndex];
@@ -144,7 +144,7 @@ class AttachmentActionsModal extends StatelessWidget {
                       'Delete',
                       StreamSvgIcon.delete(
                         size: 24,
-                        color: theme.colorTheme.accentRed,
+                        color: theme.colorTheme.accentError,
                       ),
                       () {
                         final channel = StreamChannel.of(context).channel;
@@ -165,7 +165,7 @@ class AttachmentActionsModal extends StatelessWidget {
                             ..maybePop();
                         }
                       },
-                      color: theme.colorTheme.accentRed,
+                      color: theme.colorTheme.accentError,
                     ),
                 ]
                     .map<Widget>((e) => Align(
@@ -175,7 +175,7 @@ class AttachmentActionsModal extends StatelessWidget {
                     .insertBetween(
                       Container(
                         height: 1,
-                        color: theme.colorTheme.greyWhisper,
+                        color: theme.colorTheme.borders,
                       ),
                     ),
               ),
@@ -196,7 +196,7 @@ class AttachmentActionsModal extends StatelessWidget {
   }) =>
       Material(
         key: key,
-        color: StreamChatTheme.of(context).colorTheme.white,
+        color: StreamChatTheme.of(context).colorTheme.barsBg,
         child: InkWell(
           onTap: onTap,
           child: Padding(
@@ -241,7 +241,7 @@ class AttachmentActionsModal extends StatelessWidget {
               width: 182,
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(16),
-                color: theme.colorTheme.white,
+                color: theme.colorTheme.barsBg,
               ),
               child: Center(
                 child: progress == null
@@ -249,7 +249,7 @@ class AttachmentActionsModal extends StatelessWidget {
                         height: 100,
                         width: 100,
                         child: StreamSvgIcon.error(
-                          color: theme.colorTheme.greyGainsboro,
+                          color: theme.colorTheme.disabled,
                         ),
                       )
                     : progress.toProgressIndicatorValue == 1.0
@@ -258,7 +258,7 @@ class AttachmentActionsModal extends StatelessWidget {
                             height: 160,
                             width: 160,
                             child: StreamSvgIcon.check(
-                              color: theme.colorTheme.greyGainsboro,
+                              color: theme.colorTheme.disabled,
                             ),
                           )
                         : SizedBox(
@@ -271,14 +271,14 @@ class AttachmentActionsModal extends StatelessWidget {
                                   value: progress.toProgressIndicatorValue,
                                   strokeWidth: 8,
                                   valueColor: AlwaysStoppedAnimation(
-                                    theme.colorTheme.accentBlue,
+                                    theme.colorTheme.accentPrimary,
                                   ),
                                 ),
                                 Center(
                                   child: Text(
                                     '${progress.toPercentage}%',
                                     style: theme.textTheme.headline.copyWith(
-                                      color: theme.colorTheme.grey,
+                                      color: theme.colorTheme.textLowEmphasis,
                                     ),
                                   ),
                                 ),

packages/stream_chat_flutter/lib/src/back_button.dart

@@ -44,7 +44,7 @@ class StreamBackButton extends StatelessWidget {
             padding: const EdgeInsets.all(14),
             child: StreamSvgIcon.left(
               size: 24,
-              color: StreamChatTheme.of(context).colorTheme.black,
+              color: StreamChatTheme.of(context).colorTheme.textHighEmphasis,
             ),
           ),
           if (showUnreads)

packages/stream_chat_flutter/lib/src/channel_bottom_sheet.dart

@@ -32,7 +32,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
     final isOwner = userAsMember.role == 'owner';
 
     return Material(
-      color: _streamChatThemeData.colorTheme.white,
+      color: _streamChatThemeData.colorTheme.barsBg,
       clipBehavior: Clip.antiAlias,
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
@@ -146,7 +146,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                   leading: Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 16),
                     child: StreamSvgIcon.user(
-                      color: _streamChatThemeData.colorTheme.grey,
+                      color: _streamChatThemeData.colorTheme.textLowEmphasis,
                     ),
                   ),
                   title: 'View Info',
@@ -157,7 +157,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                     leading: Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 16),
                       child: StreamSvgIcon.userRemove(
-                        color: _streamChatThemeData.colorTheme.grey,
+                        color: _streamChatThemeData.colorTheme.textLowEmphasis,
                       ),
                     ),
                     title: 'Leave Group',
@@ -176,11 +176,11 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                     leading: Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 16),
                       child: StreamSvgIcon.delete(
-                        color: _streamChatThemeData.colorTheme.accentRed,
+                        color: _streamChatThemeData.colorTheme.accentError,
                       ),
                     ),
                     title: 'Delete Conversation',
-                    titleColor: _streamChatThemeData.colorTheme.accentRed,
+                    titleColor: _streamChatThemeData.colorTheme.accentError,
                     onTap: () async {
                       setState(() {
                         _showActions = false;
@@ -195,7 +195,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                   leading: Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 16),
                     child: StreamSvgIcon.closeSmall(
-                      color: _streamChatThemeData.colorTheme.grey,
+                      color: _streamChatThemeData.colorTheme.textLowEmphasis,
                     ),
                   ),
                   title: 'Cancel',
@@ -224,7 +224,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
       question: 'Are you sure you want to delete this conversation?',
       cancelText: 'CANCEL',
       icon: StreamSvgIcon.delete(
-        color: _streamChatThemeData.colorTheme.accentRed,
+        color: _streamChatThemeData.colorTheme.accentError,
       ),
     );
     final channel = _streamChannelState.channel;
@@ -242,7 +242,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
       question: 'Are you sure you want to leave this conversation?',
       cancelText: 'CANCEL',
       icon: StreamSvgIcon.userRemove(
-        color: _streamChatThemeData.colorTheme.accentRed,
+        color: _streamChatThemeData.colorTheme.accentError,
       ),
     );
     if (res == true) {

packages/stream_chat_flutter/lib/src/channel_image.dart

@@ -110,8 +110,8 @@ class ChannelImage extends StatelessWidget {
                             .channelPreviewTheme.avatarTheme?.constraints,
                     onTap: onTap != null ? (_) => onTap!() : null,
                     selected: selected,
-                    selectionColor:
+                    selectionColor: selectionColor ??
-                        selectionColor ?? chatThemeData.colorTheme.accentBlue,
+                        chatThemeData.colorTheme.accentPrimary,
                     selectionThickness: selectionThickness,
                   ));
         } else {
@@ -132,7 +132,7 @@ class ChannelImage extends StatelessWidget {
             onTap: onTap,
             selected: selected,
             selectionColor:
-                selectionColor ?? chatThemeData.colorTheme.accentBlue,
+                selectionColor ?? chatThemeData.colorTheme.accentPrimary,
             selectionThickness: selectionThickness,
           );
         }
@@ -144,7 +144,7 @@ class ChannelImage extends StatelessWidget {
             constraints: constraints ??
                 chatThemeData.channelPreviewTheme.avatarTheme?.constraints,
             decoration: BoxDecoration(
-              color: chatThemeData.colorTheme.accentBlue,
+              color: chatThemeData.colorTheme.accentPrimary,
             ),
             child: Stack(
               alignment: Alignment.center,
@@ -157,7 +157,7 @@ class ChannelImage extends StatelessWidget {
                       child: Text(
                         data.containsKey('name') ? data['name'][0] : '',
                         style: TextStyle(
-                          color: chatThemeData.colorTheme.white,
+                          color: chatThemeData.colorTheme.barsBg,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -189,7 +189,7 @@ class ChannelImage extends StatelessWidget {
             child: Container(
               constraints: constraints ??
                   chatThemeData.ownMessageTheme.avatarTheme?.constraints,
-              color: selectionColor ?? chatThemeData.colorTheme.accentBlue,
+              color: selectionColor ?? chatThemeData.colorTheme.accentPrimary,
               child: Padding(
                 padding: EdgeInsets.all(selectionThickness),
                 child: child,

packages/stream_chat_flutter/lib/src/channel_info.dart

@@ -143,7 +143,7 @@ class ChannelInfo extends StatelessWidget {
             child: Text(
               'Try Again',
               style: textStyle?.copyWith(
-                color: StreamChatTheme.of(context).colorTheme.accentBlue,
+                color: StreamChatTheme.of(context).colorTheme.accentPrimary,
               ),
             ),
           ),

packages/stream_chat_flutter/lib/src/channel_list_header.dart

@@ -154,7 +154,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                           Color? color;
                           switch (status) {
                             case ConnectionStatus.connected:
-                              color = chatThemeData.colorTheme.accentBlue;
+                              color = chatThemeData.colorTheme.accentPrimary;
                               break;
                             case ConnectionStatus.connecting:
                               color = Colors.grey;
@@ -209,7 +209,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
     return Text(
       'Stream Chat',
       style: chatThemeData.textTheme.headlineBold.copyWith(
-        color: chatThemeData.colorTheme.black,
+        color: chatThemeData.colorTheme.textHighEmphasis,
       ),
     );
   }
@@ -262,7 +262,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
             style: chatThemeData.channelListHeaderTheme.title?.copyWith(
               fontSize: 16,
               fontWeight: FontWeight.bold,
-              color: chatThemeData.colorTheme.accentBlue,
+              color: chatThemeData.colorTheme.accentPrimary,
             ),
           ),
         ),

packages/stream_chat_flutter/lib/src/channel_list_view.dart

@@ -290,7 +290,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                         padding: const EdgeInsets.all(8),
                         child: StreamSvgIcon.message(
                           size: 136,
-                          color: chatThemeData.colorTheme.greyGainsboro,
+                          color: chatThemeData.colorTheme.disabled,
                         ),
                       ),
                       Padding(
@@ -309,7 +309,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                           'How about sending your first message to a friend?',
                           textAlign: TextAlign.center,
                           style: chatThemeData.textTheme.body.copyWith(
-                            color: chatThemeData.colorTheme.grey,
+                            color: chatThemeData.colorTheme.textLowEmphasis,
                           ),
                         ),
                       ),
@@ -327,7 +327,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                         child: Text(
                           'Start a chat',
                           style: chatThemeData.textTheme.bodyBold.copyWith(
-                            color: chatThemeData.colorTheme.accentBlue,
+                            color: chatThemeData.colorTheme.accentPrimary,
                           ),
                         ),
                       ),
@@ -362,8 +362,8 @@ class _ChannelListViewState extends State<ChannelListView> {
     final chatThemeData = StreamChatTheme.of(context);
     if (widget.crossAxisCount > 1) {
       return Shimmer.fromColors(
-        baseColor: chatThemeData.colorTheme.greyGainsboro,
+        baseColor: chatThemeData.colorTheme.disabled,
-        highlightColor: chatThemeData.colorTheme.whiteSmoke,
+        highlightColor: chatThemeData.colorTheme.inputBg,
         child: Column(
           children: [
             const SizedBox(height: 4),
@@ -391,12 +391,12 @@ class _ChannelListViewState extends State<ChannelListView> {
       );
     } else {
       return Shimmer.fromColors(
-        baseColor: chatThemeData.colorTheme.greyGainsboro,
+        baseColor: chatThemeData.colorTheme.disabled,
-        highlightColor: chatThemeData.colorTheme.whiteSmoke,
+        highlightColor: chatThemeData.colorTheme.inputBg,
         child: ListTile(
           leading: Container(
             decoration: BoxDecoration(
-              color: chatThemeData.colorTheme.white,
+              color: chatThemeData.colorTheme.barsBg,
               shape: BoxShape.circle,
             ),
             constraints: const BoxConstraints.tightFor(
@@ -412,7 +412,7 @@ class _ChannelListViewState extends State<ChannelListView> {
             alignment: Alignment.centerLeft,
             child: Container(
               decoration: BoxDecoration(
-                color: chatThemeData.colorTheme.white,
+                color: chatThemeData.colorTheme.barsBg,
                 borderRadius: BorderRadius.circular(11),
               ),
               constraints: const BoxConstraints.tightFor(
@@ -429,7 +429,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                   alignment: Alignment.centerLeft,
                   child: Container(
                     decoration: BoxDecoration(
-                      color: chatThemeData.colorTheme.white,
+                      color: chatThemeData.colorTheme.barsBg,
                       borderRadius: BorderRadius.circular(11),
                     ),
                     constraints: const BoxConstraints.expand(
@@ -441,7 +441,7 @@ class _ChannelListViewState extends State<ChannelListView> {
               Container(
                 margin: const EdgeInsets.only(left: 16),
                 decoration: BoxDecoration(
-                  color: chatThemeData.colorTheme.white,
+                  color: chatThemeData.colorTheme.barsBg,
                   borderRadius: BorderRadius.circular(11),
                 ),
                 constraints: const BoxConstraints.tightFor(
@@ -488,7 +488,7 @@ class _ChannelListViewState extends State<ChannelListView> {
     final channelsBloc = ChannelsBloc.of(context);
     final onTap = _getChannelTap(context);
     final chatThemeData = StreamChatTheme.of(context);
-    final backgroundColor = chatThemeData.colorTheme.whiteSmoke;
+    final backgroundColor = chatThemeData.colorTheme.inputBg;
 
     if (i < channels.length) {
       final channel = channels[i];
@@ -549,7 +549,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                   IconSlideAction(
                     color: backgroundColor,
                     iconWidget: StreamSvgIcon.delete(
-                      color: chatThemeData.colorTheme.accentRed,
+                      color: chatThemeData.colorTheme.accentError,
                     ),
                     onTap: widget.onDeletePressed != null
                         ? () {
@@ -565,7 +565,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                                   'Are you sure you want to delete this conversation?',
                               cancelText: 'CANCEL',
                               icon: StreamSvgIcon.delete(
-                                color: chatThemeData.colorTheme.accentRed,
+                                color: chatThemeData.colorTheme.accentError,
                               ),
                             );
                             if (res == true) {
@@ -576,7 +576,7 @@ class _ChannelListViewState extends State<ChannelListView> {
               ],
           child: DecoratedBox(
             decoration: BoxDecoration(
-              color: chatThemeData.colorTheme.whiteSnow,
+              color: chatThemeData.colorTheme.appBg,
             ),
             child: widget.channelPreviewBuilder?.call(context, channel) ??
                 ChannelPreview(
@@ -664,7 +664,7 @@ class _ChannelListViewState extends State<ChannelListView> {
           errorBuilder: (context, err) => Container(
                 color: StreamChatTheme.of(context)
                     .colorTheme
-                    .accentRed
+                    .accentError
                     .withOpacity(.2),
                 child: const Padding(
                   padding: EdgeInsets.symmetric(vertical: 16),

packages/stream_chat_flutter/lib/src/date_divider.dart

@@ -55,7 +55,7 @@ class DateDivider extends StatelessWidget {
         child: Text(
           dayInfo,
           style: chatThemeData.textTheme.footnote.copyWith(
-            color: chatThemeData.colorTheme.white,
+            color: chatThemeData.colorTheme.barsBg,
           ),
         ),
       ),

packages/stream_chat_flutter/lib/src/deleted_message.dart

@@ -39,8 +39,8 @@ class DeletedMessage extends StatelessWidget {
             side: borderSide ??
                 BorderSide(
                   color: Theme.of(context).brightness == Brightness.dark
-                      ? chatThemeData.colorTheme.white.withAlpha(24)
+                      ? chatThemeData.colorTheme.barsBg.withAlpha(24)
-                      : chatThemeData.colorTheme.black.withAlpha(24),
+                      : chatThemeData.colorTheme.textHighEmphasis.withAlpha(24),
                 ),
           ),
       child: Padding(

packages/stream_chat_flutter/lib/src/group_image.dart

@@ -51,7 +51,7 @@ class GroupImage extends StatelessWidget {
           constraints: constraints ??
               streamChatTheme.ownMessageTheme.avatarTheme?.constraints,
           decoration: BoxDecoration(
-            color: streamChatTheme.colorTheme.accentBlue,
+            color: streamChatTheme.colorTheme.accentPrimary,
           ),
           child: Flex(
             direction: Axis.vertical,
@@ -119,7 +119,7 @@ class GroupImage extends StatelessWidget {
                 BorderRadius.zero) +
             BorderRadius.circular(selectionThickness),
         child: Container(
-          color: selectionColor ?? streamChatTheme.colorTheme.accentBlue,
+          color: selectionColor ?? streamChatTheme.colorTheme.accentPrimary,
           height: 64,
           width: 64,
           child: Padding(

packages/stream_chat_flutter/lib/src/image_footer.dart

@@ -88,7 +88,7 @@ class _ImageFooterState extends State<ImageFooter> {
         context: context,
         removeTop: true,
         child: BottomAppBar(
-          color: chatThemeData.colorTheme.white,
+          color: chatThemeData.colorTheme.barsBg,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
@@ -100,7 +100,7 @@ class _ImageFooterState extends State<ImageFooter> {
                 IconButton(
                   icon: StreamSvgIcon.iconShare(
                     size: 24,
-                    color: chatThemeData.colorTheme.black,
+                    color: chatThemeData.colorTheme.textHighEmphasis,
                   ),
                   onPressed: () async {
                     final attachment =
@@ -144,7 +144,7 @@ class _ImageFooterState extends State<ImageFooter> {
               ),
               IconButton(
                 icon: StreamSvgIcon.iconGrid(
-                  color: chatThemeData.colorTheme.black,
+                  color: chatThemeData.colorTheme.textHighEmphasis,
                 ),
                 onPressed: () => _showPhotosModal(context),
               ),
@@ -160,7 +160,7 @@ class _ImageFooterState extends State<ImageFooter> {
     showModalBottomSheet(
       context: context,
       barrierColor: chatThemeData.colorTheme.overlay,
-      backgroundColor: chatThemeData.colorTheme.white,
+      backgroundColor: chatThemeData.colorTheme.barsBg,
       isScrollControlled: true,
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
@@ -199,7 +199,7 @@ class _ImageFooterState extends State<ImageFooter> {
                       alignment: Alignment.centerRight,
                       child: IconButton(
                         icon: StreamSvgIcon.close(
-                          color: chatThemeData.colorTheme.black,
+                          color: chatThemeData.colorTheme.textHighEmphasis,
                         ),
                         onPressed: () => Navigator.maybePop(context),
                       ),
@@ -262,7 +262,8 @@ class _ImageFooterState extends State<ImageFooter> {
                                   boxShadow: [
                                     BoxShadow(
                                       blurRadius: 8,
-                                      color: chatThemeData.colorTheme.black
+                                      color: chatThemeData
+                                          .colorTheme.textHighEmphasis
                                           .withOpacity(0.3),
                                     ),
                                   ],

packages/stream_chat_flutter/lib/src/image_header.dart

@@ -59,7 +59,7 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
       leading: showBackButton
           ? IconButton(
               icon: StreamSvgIcon.close(
-                color: chatThemeData.colorTheme.black,
+                color: chatThemeData.colorTheme.textHighEmphasis,
                 size: 24,
               ),
               onPressed: onBackPressed,
@@ -70,7 +70,7 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
         if (message.type != 'ephemeral')
           IconButton(
             icon: StreamSvgIcon.iconMenuPoint(
-              color: chatThemeData.colorTheme.black,
+              color: chatThemeData.colorTheme.textHighEmphasis,
             ),
             onPressed: () {
               _showMessageActionModalBottomSheet(context);

packages/stream_chat_flutter/lib/src/info_tile.dart

@@ -46,8 +46,8 @@ class InfoTile extends StatelessWidget {
       childAnchor: childAnchor ?? Alignment.bottomCenter,
       portal: Container(
         height: 25,
-        color:
+        color: backgroundColor ??
-            backgroundColor ?? chatThemeData.colorTheme.grey.withOpacity(0.9),
+            chatThemeData.colorTheme.textLowEmphasis.withOpacity(0.9),
         child: Center(
           child: Text(
             message,

packages/stream_chat_flutter/lib/src/media_list_view.dart

@@ -90,8 +90,8 @@ class _MediaListViewState extends State<MediaListView> {
                                   ? 1.0
                                   : 0.0,
                           child: Container(
-                            color:
+                            color: chatThemeData.colorTheme.textHighEmphasis
-                                chatThemeData.colorTheme.black.withOpacity(0.5),
+                                .withOpacity(0.5),
                             alignment: Alignment.topRight,
                             padding: const EdgeInsets.only(
                               top: 8,
@@ -99,10 +99,11 @@ class _MediaListViewState extends State<MediaListView> {
                             ),
                             child: CircleAvatar(
                               radius: 12,
-                              backgroundColor: chatThemeData.colorTheme.white,
+                              backgroundColor: chatThemeData.colorTheme.barsBg,
                               child: StreamSvgIcon.check(
                                 size: 24,
-                                color: chatThemeData.colorTheme.black,
+                                color:
+                                    chatThemeData.colorTheme.textHighEmphasis,
                               ),
                             ),
                           ),
@@ -124,7 +125,7 @@ class _MediaListViewState extends State<MediaListView> {
                         child: Text(
                           media.videoDuration.format(),
                           style: TextStyle(
-                            color: chatThemeData.colorTheme.white,
+                            color: chatThemeData.colorTheme.barsBg,
                           ),
                         ),
                       ),

packages/stream_chat_flutter/lib/src/mention_tile.dart

@@ -76,7 +76,7 @@ class MentionTile extends StatelessWidget {
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: chatThemeData.textTheme.footnoteBold.copyWith(
-                          color: chatThemeData.colorTheme.grey,
+                          color: chatThemeData.colorTheme.textLowEmphasis,
                         ),
                       ),
                 ],
@@ -90,7 +90,7 @@ class MentionTile extends StatelessWidget {
                   left: 8,
                 ),
                 child: StreamSvgIcon.mentions(
-                  color: chatThemeData.colorTheme.accentBlue,
+                  color: chatThemeData.colorTheme.accentPrimary,
                 ),
               ),
         ],

packages/stream_chat_flutter/lib/src/message_actions_modal.dart

@@ -165,7 +165,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                 child: SizedBox(
                   width: mediaQueryData.size.width * 0.75,
                   child: Material(
-                    color: streamChatThemeData.colorTheme.whiteSnow,
+                    color: streamChatThemeData.colorTheme.appBg,
                     clipBehavior: Clip.hardEdge,
                     shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(16),
@@ -197,7 +197,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                       ].insertBetween(
                         Container(
                           height: 1,
-                          color: streamChatThemeData.colorTheme.greyWhisper,
+                          color: streamChatThemeData.colorTheme.borders,
                         ),
                       ),
                     ),
@@ -270,7 +270,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
       context,
       title: 'Flag Message',
       icon: StreamSvgIcon.flag(
-        color: streamChatThemeData.colorTheme.accentRed,
+        color: streamChatThemeData.colorTheme.accentError,
         size: 24,
       ),
       question:
@@ -287,7 +287,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         await showInfoDialog(
           context,
           icon: StreamSvgIcon.flag(
-            color: theme.colorTheme.accentRed,
+            color: theme.colorTheme.accentError,
             size: 24,
           ),
           details: 'The message has been reported to a moderator.',
@@ -300,7 +300,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
           await showInfoDialog(
             context,
             icon: StreamSvgIcon.flag(
-              color: theme.colorTheme.accentRed,
+              color: theme.colorTheme.accentError,
               size: 24,
             ),
             details: 'The message has been reported to a moderator.',
@@ -337,7 +337,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
       context,
       title: 'Delete message',
       icon: StreamSvgIcon.flag(
-        color: StreamChatTheme.of(context).colorTheme.accentRed,
+        color: StreamChatTheme.of(context).colorTheme.accentError,
         size: 24,
       ),
       question: 'Are you sure you want to permanently delete this\nmessage?',
@@ -363,7 +363,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     showInfoDialog(
       context,
       icon: StreamSvgIcon.error(
-        color: StreamChatTheme.of(context).colorTheme.accentRed,
+        color: StreamChatTheme.of(context).colorTheme.accentError,
         size: 24,
       ),
       details: 'The operation couldn\'t be completed.',
@@ -540,7 +540,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         child: Row(
           children: [
             StreamSvgIcon.circleUp(
-              color: streamChatThemeData.colorTheme.accentBlue,
+              color: streamChatThemeData.colorTheme.accentPrimary,
             ),
             const SizedBox(width: 16),
             Text(
@@ -585,7 +585,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                     Padding(
                       padding: const EdgeInsets.all(8),
                       child: StreamSvgIcon.edit(
-                        color: streamChatThemeData.colorTheme.greyGainsboro,
+                        color: streamChatThemeData.colorTheme.disabled,
                       ),
                     ),
                     const Text(

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -334,7 +334,7 @@ class MessageInputState extends State<MessageInput> {
                       Padding(
                         padding: const EdgeInsets.all(8),
                         child: StreamSvgIcon.reply(
-                          color: _streamChatTheme.colorTheme.greyGainsboro,
+                          color: _streamChatTheme.colorTheme.disabled,
                         ),
                       ),
                       const Text(
@@ -401,7 +401,8 @@ class MessageInputState extends State<MessageInput> {
               border: _sendAsDm
                   ? null
                   : Border.all(
-                      color: _streamChatTheme.colorTheme.black.withOpacity(.5),
+                      color: _streamChatTheme.colorTheme.textHighEmphasis
+                          .withOpacity(.5),
                       width: 2,
                     ),
               borderRadius: BorderRadius.circular(3),
@@ -410,8 +411,8 @@ class MessageInputState extends State<MessageInput> {
               child: Material(
                 borderRadius: BorderRadius.circular(3),
                 color: _sendAsDm
-                    ? _streamChatTheme.colorTheme.accentBlue
+                    ? _streamChatTheme.colorTheme.accentPrimary
-                    : _streamChatTheme.colorTheme.white,
+                    : _streamChatTheme.colorTheme.barsBg,
                 child: InkWell(
                   onTap: () {
                     setState(() {
@@ -426,7 +427,7 @@ class MessageInputState extends State<MessageInput> {
                         : CrossFadeState.showSecond,
                     firstChild: StreamSvgIcon.check(
                       size: 16,
-                      color: _streamChatTheme.colorTheme.white,
+                      color: _streamChatTheme.colorTheme.barsBg,
                     ),
                     secondChild: const SizedBox(
                       height: 16,
@@ -442,7 +443,8 @@ class MessageInputState extends State<MessageInput> {
             child: Text(
               'Also send as direct message',
               style: _streamChatTheme.textTheme.footnote.copyWith(
-                color: _streamChatTheme.colorTheme.black.withOpacity(0.5),
+                color: _streamChatTheme.colorTheme.textHighEmphasis
+                    .withOpacity(0.5),
               ),
             ),
           ),
@@ -582,7 +584,7 @@ class MessageInputState extends State<MessageInput> {
       isDense: true,
       hintText: _getHint(),
       hintStyle: _streamChatTheme.messageInputTheme.inputTextStyle!.copyWith(
-        color: _streamChatTheme.colorTheme.grey,
+        color: _streamChatTheme.colorTheme.textLowEmphasis,
       ),
       border: const OutlineInputBorder(
         borderSide: BorderSide(
@@ -620,7 +622,7 @@ class MessageInputState extends State<MessageInput> {
                     constraints: BoxConstraints.tight(const Size(64, 24)),
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(12),
-                      color: _streamChatTheme.colorTheme.accentBlue,
+                      color: _streamChatTheme.colorTheme.accentPrimary,
                     ),
                     alignment: Alignment.center,
                     child: Row(
@@ -834,12 +836,12 @@ class MessageInputState extends State<MessageInput> {
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(8),
         ),
-        color: _streamChatTheme.colorTheme.white,
+        color: _streamChatTheme.colorTheme.barsBg,
         clipBehavior: Clip.hardEdge,
         child: Container(
           constraints: BoxConstraints.loose(const Size.fromHeight(400)),
           decoration: BoxDecoration(
-              color: _streamChatTheme.colorTheme.white,
+              color: _streamChatTheme.colorTheme.barsBg,
               borderRadius: BorderRadius.circular(8)),
           child: ListView(
             padding: const EdgeInsets.all(0),
@@ -855,14 +857,14 @@ class MessageInputState extends State<MessageInput> {
                           horizontal: 8,
                         ),
                         child: StreamSvgIcon.lightning(
-                          color: _streamChatTheme.colorTheme.accentBlue,
+                          color: _streamChatTheme.colorTheme.accentPrimary,
                         ),
                       ),
                       Text(
                         'Instant Commands',
                         style: TextStyle(
-                          color:
+                          color: _streamChatTheme.colorTheme.textHighEmphasis
-                              _streamChatTheme.colorTheme.black.withOpacity(.5),
+                              .withOpacity(.5),
                         ),
                       )
                     ],
@@ -902,7 +904,7 @@ class MessageInputState extends State<MessageInput> {
                                       color: _streamChatTheme
                                           // ignore: lines_longer_than_80_chars
                                           .colorTheme
-                                          .grey,
+                                          .textLowEmphasis,
                                     ),
                                   ),
                                 ],
@@ -946,24 +948,29 @@ class MessageInputState extends State<MessageInput> {
       switch (index) {
         case 0:
           return _attachments.isEmpty
-              ? streamChatThemeData.colorTheme.accentBlue
+              ? streamChatThemeData.colorTheme.accentPrimary
               : (!_attachmentContainsFile
-                  ? streamChatThemeData.colorTheme.accentBlue
+                  ? streamChatThemeData.colorTheme.accentPrimary
-                  : streamChatThemeData.colorTheme.black.withOpacity(0.2));
+                  : streamChatThemeData.colorTheme.textHighEmphasis
+                      .withOpacity(0.2));
         case 1:
           return _attachmentContainsFile
-              ? streamChatThemeData.colorTheme.accentBlue
+              ? streamChatThemeData.colorTheme.accentPrimary
               : (_attachments.isEmpty
-                  ? streamChatThemeData.colorTheme.black.withOpacity(0.5)
+                  ? streamChatThemeData.colorTheme.textHighEmphasis
-                  : streamChatThemeData.colorTheme.black.withOpacity(0.2));
+                      .withOpacity(0.5)
+                  : streamChatThemeData.colorTheme.textHighEmphasis
+                      .withOpacity(0.2));
         case 2:
           return _attachmentContainsFile && _attachments.isNotEmpty
-              ? streamChatThemeData.colorTheme.black.withOpacity(0.2)
+              ? streamChatThemeData.colorTheme.textHighEmphasis.withOpacity(0.2)
-              : streamChatThemeData.colorTheme.black.withOpacity(0.5);
+              : streamChatThemeData.colorTheme.textHighEmphasis
+                  .withOpacity(0.5);
         case 3:
           return _attachmentContainsFile && _attachments.isNotEmpty
-              ? streamChatThemeData.colorTheme.black.withOpacity(0.2)
+              ? streamChatThemeData.colorTheme.textHighEmphasis.withOpacity(0.2)
-              : streamChatThemeData.colorTheme.black.withOpacity(0.5);
+              : streamChatThemeData.colorTheme.textHighEmphasis
+                  .withOpacity(0.5);
         default:
           return Colors.black;
       }
@@ -973,7 +980,7 @@ class MessageInputState extends State<MessageInput> {
       duration: const Duration(milliseconds: 300),
       height: _openFilePickerSection ? _filePickerSize : 0,
       child: Material(
-        color: _streamChatTheme.colorTheme.whiteSmoke,
+        color: _streamChatTheme.colorTheme.inputBg,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
@@ -1036,7 +1043,7 @@ class MessageInputState extends State<MessageInput> {
               },
               child: DecoratedBox(
                 decoration: BoxDecoration(
-                  color: _streamChatTheme.colorTheme.white,
+                  color: _streamChatTheme.colorTheme.barsBg,
                   borderRadius: const BorderRadius.only(
                     topLeft: Radius.circular(16),
                     topRight: Radius.circular(16),
@@ -1052,7 +1059,7 @@ class MessageInputState extends State<MessageInput> {
                         height: 4,
                         child: DecoratedBox(
                           decoration: BoxDecoration(
-                            color: _streamChatTheme.colorTheme.whiteSmoke,
+                            color: _streamChatTheme.colorTheme.inputBg,
                             borderRadius: BorderRadius.circular(4),
                           ),
                         ),
@@ -1066,7 +1073,7 @@ class MessageInputState extends State<MessageInput> {
               Expanded(
                 child: DecoratedBox(
                   decoration: BoxDecoration(
-                    color: _streamChatTheme.colorTheme.white,
+                    color: _streamChatTheme.colorTheme.barsBg,
                     borderRadius: BorderRadius.circular(8),
                   ),
                   child: _PickerWidget(
@@ -1153,7 +1160,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'ban':
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: StreamSvgIcon.iconUserDelete(
             size: 16,
@@ -1162,7 +1169,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'flag':
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: StreamSvgIcon.flag(
             size: 14,
@@ -1171,7 +1178,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'imgur':
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: ClipOval(
             child: StreamSvgIcon.imgur(
@@ -1181,7 +1188,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'mute':
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: StreamSvgIcon.mute(
             size: 16,
@@ -1190,7 +1197,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'unban':
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: StreamSvgIcon.userAdd(
             size: 16,
@@ -1199,7 +1206,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'unmute':
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: StreamSvgIcon.volumeUp(
             size: 16,
@@ -1208,7 +1215,7 @@ class MessageInputState extends State<MessageInput> {
         );
       default:
         return CircleAvatar(
-          backgroundColor: _streamChatTheme.colorTheme.accentBlue,
+          backgroundColor: _streamChatTheme.colorTheme.accentPrimary,
           radius: 12,
           child: StreamSvgIcon.lightning(
             size: 16,
@@ -1248,7 +1255,7 @@ class MessageInputState extends State<MessageInput> {
     final child = Card(
       margin: const EdgeInsets.all(8),
       elevation: 2,
-      color: _streamChatTheme.colorTheme.white,
+      color: _streamChatTheme.colorTheme.barsBg,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(8),
       ),
@@ -1256,7 +1263,7 @@ class MessageInputState extends State<MessageInput> {
       child: Container(
         constraints: BoxConstraints.loose(const Size.fromHeight(240)),
         decoration: BoxDecoration(
-          color: _streamChatTheme.colorTheme.white,
+          color: _streamChatTheme.colorTheme.barsBg,
         ),
         child: FutureBuilder<List<Member>>(
           future: queryMembers ?? Future.value(members),
@@ -1272,7 +1279,7 @@ class MessageInputState extends State<MessageInput> {
                   .where((it) => it.user != null)
                   .map(
                     (m) => Material(
-                      color: _streamChatTheme.colorTheme.white,
+                      color: _streamChatTheme.colorTheme.barsBg,
                       child: InkWell(
                         onTap: () {
                           if (m.user != null) {
@@ -1359,7 +1366,7 @@ class MessageInputState extends State<MessageInput> {
               child: Card(
                 margin: const EdgeInsets.all(8),
                 elevation: 2,
-                color: _streamChatTheme.colorTheme.white,
+                color: _streamChatTheme.colorTheme.barsBg,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(8),
                 ),
@@ -1374,7 +1381,7 @@ class MessageInputState extends State<MessageInput> {
                         offset: Offset(0, -4),
                       ),
                     ],
-                    color: _streamChatTheme.colorTheme.white,
+                    color: _streamChatTheme.colorTheme.barsBg,
                   ),
                   child: ListView.builder(
                       padding: const EdgeInsets.all(0),
@@ -1390,15 +1397,16 @@ class MessageInputState extends State<MessageInput> {
                                   padding:
                                       const EdgeInsets.symmetric(horizontal: 8),
                                   child: StreamSvgIcon.smile(
-                                    color:
+                                    color: _streamChatTheme
-                                        _streamChatTheme.colorTheme.accentBlue,
+                                        .colorTheme.accentPrimary,
                                   ),
                                 ),
                                 Flexible(
                                   child: Text(
                                     'Emoji matching "$query"',
                                     style: TextStyle(
-                                      color: _streamChatTheme.colorTheme.black
+                                      color: _streamChatTheme
+                                          .colorTheme.textHighEmphasis
                                           .withOpacity(.5),
                                     ),
                                   ),
@@ -1570,11 +1578,12 @@ class MessageInputState extends State<MessageInput> {
           onPressed: () {
             setState(() => _attachments.remove(attachment.id));
           },
-          fillColor: _streamChatTheme.colorTheme.black.withOpacity(.5),
+          fillColor:
+              _streamChatTheme.colorTheme.textHighEmphasis.withOpacity(.5),
           child: Center(
             child: StreamSvgIcon.close(
               size: 24,
-              color: _streamChatTheme.colorTheme.white,
+              color: _streamChatTheme.colorTheme.barsBg,
             ),
           ),
         ),
@@ -1609,8 +1618,8 @@ class MessageInputState extends State<MessageInput> {
                 errorWidget: (_, obj, trace) =>
                     getFileTypeImage(attachment.extraData['other'] as String?),
                 placeholder: (context, _) => Shimmer.fromColors(
-                  baseColor: _streamChatTheme.colorTheme.greyGainsboro,
+                  baseColor: _streamChatTheme.colorTheme.disabled,
-                  highlightColor: _streamChatTheme.colorTheme.whiteSmoke,
+                  highlightColor: _streamChatTheme.colorTheme.inputBg,
                   child: Image.asset(
                     'images/placeholder.png',
                     fit: BoxFit.cover,
@@ -1651,7 +1660,7 @@ class MessageInputState extends State<MessageInput> {
     return IconButton(
       icon: StreamSvgIcon.lightning(
         color: s.isNotEmpty
-            ? _streamChatTheme.colorTheme.greyGainsboro
+            ? _streamChatTheme.colorTheme.disabled
             : (_commandsOverlay != null
                 ? _streamChatTheme.messageInputTheme.actionButtonColor
                 : _streamChatTheme.messageInputTheme.actionButtonIdleColor),
@@ -2058,7 +2067,7 @@ class MessageInputState extends State<MessageInput> {
 
   void _showErrorAlert(String description) {
     showModalBottomSheet(
-      backgroundColor: _streamChatTheme.colorTheme.white,
+      backgroundColor: _streamChatTheme.colorTheme.barsBg,
       context: context,
       shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
@@ -2072,7 +2081,7 @@ class MessageInputState extends State<MessageInput> {
             height: 26,
           ),
           StreamSvgIcon.error(
-            color: _streamChatTheme.colorTheme.accentRed,
+            color: _streamChatTheme.colorTheme.accentError,
             size: 24,
           ),
           const SizedBox(
@@ -2096,7 +2105,8 @@ class MessageInputState extends State<MessageInput> {
             height: 36,
           ),
           Container(
-            color: _streamChatTheme.colorTheme.black.withOpacity(.08),
+            color:
+                _streamChatTheme.colorTheme.textHighEmphasis.withOpacity(.08),
             height: 1,
           ),
           Row(
@@ -2108,8 +2118,8 @@ class MessageInputState extends State<MessageInput> {
                 },
                 child: Text(
                   'OK',
-                  style: _streamChatTheme.textTheme.bodyBold
+                  style: _streamChatTheme.textTheme.bodyBold.copyWith(
-                      .copyWith(color: _streamChatTheme.colorTheme.accentBlue),
+                      color: _streamChatTheme.colorTheme.accentPrimary),
                 ),
               ),
             ],
@@ -2250,12 +2260,12 @@ class __PickerWidgetState extends State<_PickerWidget> {
                 },
                 child: Container(
                   constraints: const BoxConstraints.expand(),
-                  color: widget.streamChatTheme.colorTheme.whiteSmoke,
+                  color: widget.streamChatTheme.colorTheme.inputBg,
                   alignment: Alignment.center,
                   child: Text(
                     'Add more files',
                     style: TextStyle(
-                      color: widget.streamChatTheme.colorTheme.accentBlue,
+                      color: widget.streamChatTheme.colorTheme.accentPrimary,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
@@ -2273,7 +2283,7 @@ class __PickerWidgetState extends State<_PickerWidget> {
               PhotoManager.openSetting();
             },
             child: Container(
-              color: widget.streamChatTheme.colorTheme.whiteSmoke,
+              color: widget.streamChatTheme.colorTheme.inputBg,
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -2282,13 +2292,14 @@ class __PickerWidgetState extends State<_PickerWidget> {
                     'svgs/icon_picture_empty_state.svg',
                     package: 'stream_chat_flutter',
                     height: 140,
-                    color: widget.streamChatTheme.colorTheme.greyGainsboro,
+                    color: widget.streamChatTheme.colorTheme.disabled,
                   ),
                   Text(
                     // ignore: lines_longer_than_80_chars
                     'Please enable access to your photos \nand videos so you can share them with friends.',
                     style: widget.streamChatTheme.textTheme.body.copyWith(
-                        color: widget.streamChatTheme.colorTheme.grey),
+                        color:
+                            widget.streamChatTheme.colorTheme.textLowEmphasis),
                     textAlign: TextAlign.center,
                   ),
                   const SizedBox(height: 6),
@@ -2296,7 +2307,7 @@ class __PickerWidgetState extends State<_PickerWidget> {
                     child: Text(
                       'Allow access to your gallery',
                       style: widget.streamChatTheme.textTheme.bodyBold.copyWith(
-                        color: widget.streamChatTheme.colorTheme.accentBlue,
+                        color: widget.streamChatTheme.colorTheme.accentPrimary,
                       ),
                     ),
                   ),

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -368,7 +368,8 @@ class _MessageListViewState extends State<MessageListView> {
                   child: Text(
                     'No chats here yet...',
                     style: _streamTheme.textTheme.footnote.copyWith(
-                        color: _streamTheme.colorTheme.black.withOpacity(.5)),
+                        color: _streamTheme.colorTheme.textHighEmphasis
+                            .withOpacity(.5)),
                   ),
                 ),
         messageListBuilder: widget.messageListBuilder ??
@@ -380,7 +381,8 @@ class _MessageListViewState extends State<MessageListView> {
                   child: Text(
                     'Something went wrong',
                     style: _streamTheme.textTheme.footnote.copyWith(
-                        color: _streamTheme.colorTheme.black.withOpacity(.5)),
+                        color: _streamTheme.colorTheme.textHighEmphasis
+                            .withOpacity(.5)),
                   ),
                 ),
       );
@@ -710,7 +712,7 @@ class _MessageListViewState extends State<MessageListView> {
               clipBehavior: Clip.none,
               children: [
                 FloatingActionButton(
-                  backgroundColor: _streamTheme.colorTheme.white,
+                  backgroundColor: _streamTheme.colorTheme.barsBg,
                   onPressed: () {
                     if (unreadCount > 0) {
                       streamChannel!.channel.markRead();
@@ -729,7 +731,7 @@ class _MessageListViewState extends State<MessageListView> {
                     }
                   },
                   child: StreamSvgIcon.down(
-                    color: _streamTheme.colorTheme.black,
+                    color: _streamTheme.colorTheme.textHighEmphasis,
                   ),
                 ),
                 if (showUnreadCount)
@@ -1106,7 +1108,7 @@ class _MessageListViewState extends State<MessageListView> {
             widget.onMessageSwiped?.call(message);
           },
           backgroundIcon: StreamSvgIcon.reply(
-            color: _streamTheme.colorTheme.accentBlue,
+            color: _streamTheme.colorTheme.accentPrimary,
           ),
           child: child,
         ),
@@ -1122,7 +1124,7 @@ class _MessageListViewState extends State<MessageListView> {
       child = TweenAnimationBuilder<Color?>(
         tween: ColorTween(
           begin: highlightColor,
-          end: colorTheme.white.withOpacity(0),
+          end: colorTheme.barsBg.withOpacity(0),
         ),
         duration: const Duration(seconds: 3),
         onEnd: () => initialMessageHighlightComplete = true,
@@ -1252,7 +1254,7 @@ class _LoadingIndicator extends StatelessWidget {
       stream: stream,
       initialData: false,
       errorBuilder: (context, error) => Container(
-        color: streamTheme.colorTheme.accentRed.withOpacity(.2),
+        color: streamTheme.colorTheme.accentError.withOpacity(.2),
         child: const Center(
           child: Text('Error loading messages'),
         ),

packages/stream_chat_flutter/lib/src/message_reactions_modal.dart

@@ -142,7 +142,7 @@ class MessageReactionsModal extends StatelessWidget {
   Widget _buildReactionCard(BuildContext context, User? user) {
     final chatThemeData = StreamChatTheme.of(context);
     return Card(
-      color: chatThemeData.colorTheme.white,
+      color: chatThemeData.colorTheme.barsBg,
       clipBehavior: Clip.hardEdge,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(16),
@@ -224,7 +224,7 @@ class MessageReactionsModal extends StatelessWidget {
                         messageTheme.reactionsBorderColor ?? Colors.transparent,
                     backgroundColor: messageTheme.reactionsBackgroundColor ??
                         Colors.transparent,
-                    maskColor: chatThemeData.colorTheme.white,
+                    maskColor: chatThemeData.colorTheme.barsBg,
                     tailCirclesSpacing: 1,
                     highlightOwnReactions: false,
                   ),

packages/stream_chat_flutter/lib/src/message_search_list_view.dart

@@ -199,7 +199,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
 
   Widget _separatorBuilder(BuildContext context, int index) => Container(
         height: 1,
-        color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+        color: StreamChatTheme.of(context).colorTheme.borders,
       );
 
   Widget _listItemBuilder(
@@ -224,7 +224,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
             return Container(
               color: StreamChatTheme.of(context)
                   .colorTheme
-                  .accentRed
+                  .accentError
                   .withOpacity(.2),
               child: const Padding(
                 padding: EdgeInsets.symmetric(vertical: 16),
@@ -294,7 +294,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
               child: Text(
                 '${items.length} results',
                 style: TextStyle(
-                  color: chatThemeData.colorTheme.grey,
+                  color: chatThemeData.colorTheme.textLowEmphasis,
                 ),
               ),
             ),

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -222,7 +222,7 @@ class MessageWidget extends StatefulWidget {
             final border = RoundedRectangleBorder(
               side: attachmentBorderSide ??
                   BorderSide(
-                    color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+                    color: StreamChatTheme.of(context).colorTheme.borders,
                   ),
               borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
             );
@@ -749,7 +749,7 @@ class _MessageWidgetState extends State<MessageWidget>
                                             child: CustomPaint(
                                               painter: ReactionBubblePainter(
                                                 _streamChatTheme
-                                                    .colorTheme.white,
+                                                    .colorTheme.barsBg,
                                                 Colors.transparent,
                                                 Colors.transparent,
                                                 tailCirclesSpace: 1,
@@ -835,14 +835,14 @@ class _MessageWidgetState extends State<MessageWidget>
         mainAxisSize: MainAxisSize.min,
         children: [
           StreamSvgIcon.eye(
-            color: chatThemeData.colorTheme.grey,
+            color: chatThemeData.colorTheme.textLowEmphasis,
             size: 16,
           ),
           const SizedBox(width: 8),
           Text(
             'Only visible to you',
             style: chatThemeData.textTheme.footnote
-                .copyWith(color: chatThemeData.colorTheme.grey),
+                .copyWith(color: chatThemeData.colorTheme.textLowEmphasis),
           ),
         ],
       );
@@ -1218,7 +1218,7 @@ class _MessageWidgetState extends State<MessageWidget>
             Text(
               widget.readList!.length.toString(),
               style: style.copyWith(
-                color: _streamChatTheme.colorTheme.accentBlue,
+                color: _streamChatTheme.colorTheme.accentPrimary,
               ),
             ),
           const SizedBox(width: 2),
@@ -1292,7 +1292,7 @@ class _MessageWidgetState extends State<MessageWidget>
           Text(
             'Pinned by ${pinnedByMe ? 'You' : pinnedBy.name}',
             style: TextStyle(
-              color: _streamChatTheme.colorTheme.grey,
+              color: _streamChatTheme.colorTheme.textLowEmphasis,
               fontSize: 13,
               fontWeight: FontWeight.w400,
             ),
@@ -1310,7 +1310,7 @@ class _MessageWidgetState extends State<MessageWidget>
     }
 
     if (hasUrlAttachments) {
-      return _streamChatTheme.colorTheme.blueAlice;
+      return _streamChatTheme.colorTheme.linkBg;
     }
 
     if (isOnlyEmoji) {
@@ -1366,7 +1366,7 @@ class _ThreadParticipants extends StatelessWidget {
           child: Container(
             decoration: BoxDecoration(
               shape: BoxShape.circle,
-              color: _streamChatTheme.colorTheme.white,
+              color: _streamChatTheme.colorTheme.barsBg,
             ),
             padding: const EdgeInsets.all(1),
             child: UserAvatar(
@@ -1395,7 +1395,7 @@ class _ThreadReplyPainter extends CustomPainter {
   @override
   void paint(Canvas canvas, Size size) {
     final paint = Paint()
-      ..color = color ?? StreamChatTheme.of(context!).colorTheme.greyGainsboro
+      ..color = color ?? StreamChatTheme.of(context!).colorTheme.disabled
       ..style = PaintingStyle.stroke
       ..strokeWidth = 1
       ..strokeCap = StrokeCap.round;

packages/stream_chat_flutter/lib/src/option_list_tile.dart

@@ -46,11 +46,11 @@ class OptionListTile extends StatelessWidget {
     return Column(
       children: [
         Container(
-          color: separatorColor ?? chatThemeData.colorTheme.greyGainsboro,
+          color: separatorColor ?? chatThemeData.colorTheme.disabled,
           height: 1,
         ),
         Material(
-          color: tileColor ?? chatThemeData.colorTheme.white,
+          color: tileColor ?? chatThemeData.colorTheme.barsBg,
           child: SizedBox(
             height: 63,
             child: InkWell(

packages/stream_chat_flutter/lib/src/quoted_message_widget.dart

@@ -154,7 +154,7 @@ class QuotedMessageWidget extends StatelessWidget {
         color: _getBackgroundColor(context),
         border: showBorder
             ? Border.all(
-                color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
+                color: StreamChatTheme.of(context).colorTheme.disabled,
               )
             : null,
         borderRadius: BorderRadius.only(
@@ -280,7 +280,7 @@ class QuotedMessageWidget extends StatelessWidget {
 
   Color? _getBackgroundColor(BuildContext context) {
     if (_containsScrapeUrl) {
-      return StreamChatTheme.of(context).colorTheme.blueAlice;
+      return StreamChatTheme.of(context).colorTheme.linkBg;
     }
     return messageTheme.messageBackgroundColor;
   }

packages/stream_chat_flutter/lib/src/reaction_bubble.dart

@@ -141,8 +141,8 @@ class ReactionBubble extends StatelessWidget {
               Icons.help_outline_rounded,
               size: 16,
               color: (!highlightOwnReactions || reaction.user?.id == userId)
-                  ? chatThemeData.colorTheme.accentBlue
+                  ? chatThemeData.colorTheme.accentPrimary
-                  : chatThemeData.colorTheme.black.withOpacity(.5),
+                  : chatThemeData.colorTheme.textHighEmphasis.withOpacity(.5),
             ),
     );
   }

packages/stream_chat_flutter/lib/src/reaction_picker.dart

@@ -49,7 +49,7 @@ class _ReactionPickerState extends State<ReactionPicker>
 
     final child = Material(
       borderRadius: BorderRadius.circular(24),
-      color: chatThemeData.colorTheme.white,
+      color: chatThemeData.colorTheme.barsBg,
       clipBehavior: Clip.hardEdge,
       child: Padding(
         padding: const EdgeInsets.symmetric(

packages/stream_chat_flutter/lib/src/sending_indicator.dart

@@ -25,7 +25,7 @@ class SendingIndicator extends StatelessWidget {
     if (isMessageRead) {
       return StreamSvgIcon.checkAll(
         size: size,
-        color: StreamChatTheme.of(context).colorTheme.accentBlue,
+        color: StreamChatTheme.of(context).colorTheme.accentPrimary,
       );
     }
     if (message.status == MessageSendingStatus.sent) {

packages/stream_chat_flutter/lib/src/stream_chat.dart

@@ -101,8 +101,8 @@ class StreamChatState extends State<StreamChat> {
             return Theme(
               data: materialTheme.copyWith(
                 primaryIconTheme: streamTheme.primaryIconTheme,
-                accentColor: streamTheme.colorTheme.accentBlue,
+                accentColor: streamTheme.colorTheme.accentPrimary,
-                scaffoldBackgroundColor: streamTheme.colorTheme.white,
+                scaffoldBackgroundColor: streamTheme.colorTheme.barsBg,
               ),
               child: StreamChatCore(
                 client: client,

packages/stream_chat_flutter/lib/src/stream_chat_theme.dart

@@ -114,7 +114,7 @@ class StreamChatThemeData {
     final defaultTheme = StreamChatThemeData(brightness: theme.brightness);
     final customizedTheme = StreamChatThemeData.fromColorAndTextTheme(
       defaultTheme.colorTheme.copyWith(
-        accentBlue: theme.accentColor,
+        accentPrimary: theme.accentColor,
       ),
       defaultTheme.textTheme,
     );
@@ -216,8 +216,9 @@ class StreamChatThemeData {
     ColorTheme colorTheme,
     TextTheme textTheme,
   ) {
-    final accentColor = colorTheme.accentBlue;
+    final accentColor = colorTheme.accentPrimary;
-    final iconTheme = IconThemeData(color: colorTheme.black.withOpacity(.5));
+    final iconTheme =
+        IconThemeData(color: colorTheme.textHighEmphasis.withOpacity(.5));
     return StreamChatThemeData.raw(
       textTheme: textTheme,
       colorTheme: colorTheme,
@@ -231,7 +232,7 @@ class StreamChatThemeData {
         ),
       ),
       channelPreviewTheme: ChannelPreviewTheme(
-        unreadCounterColor: colorTheme.accentRed,
+        unreadCounterColor: colorTheme.accentError,
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(20),
           constraints: const BoxConstraints.tightFor(
@@ -244,7 +245,7 @@ class StreamChatThemeData {
           color: const Color(0xff7A7A7A),
         ),
         lastMessageAt: textTheme.footnote.copyWith(
-          color: colorTheme.black.withOpacity(.5),
+          color: colorTheme.textHighEmphasis.withOpacity(.5),
         ),
         indicatorIconSize: 16,
       ),
@@ -256,7 +257,7 @@ class StreamChatThemeData {
             width: 40,
           ),
         ),
-        color: colorTheme.white,
+        color: colorTheme.barsBg,
         title: textTheme.headlineBold,
       ),
       channelTheme: ChannelTheme(
@@ -268,7 +269,7 @@ class StreamChatThemeData {
               width: 40,
             ),
           ),
-          color: colorTheme.white,
+          color: colorTheme.barsBg,
           title: textTheme.headlineBold,
           subtitle: textTheme.footnote.copyWith(
             color: const Color(0xff7A7A7A),
@@ -276,15 +277,17 @@ class StreamChatThemeData {
         ),
       ),
       ownMessageTheme: MessageTheme(
-        messageAuthor: textTheme.footnote.copyWith(color: colorTheme.grey),
+        messageAuthor:
+            textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis),
         messageText: textTheme.body,
-        createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
+        createdAt:
+            textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis),
         replies: textTheme.footnoteBold.copyWith(color: accentColor),
-        messageBackgroundColor: colorTheme.greyGainsboro,
+        messageBackgroundColor: colorTheme.disabled,
-        reactionsBackgroundColor: colorTheme.white,
+        reactionsBackgroundColor: colorTheme.barsBg,
-        reactionsBorderColor: colorTheme.greyWhisper,
+        reactionsBorderColor: colorTheme.borders,
-        reactionsMaskColor: colorTheme.whiteSnow,
+        reactionsMaskColor: colorTheme.appBg,
-        messageBorderColor: colorTheme.greyGainsboro,
+        messageBorderColor: colorTheme.disabled,
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(20),
           constraints: const BoxConstraints.tightFor(
@@ -297,18 +300,20 @@ class StreamChatThemeData {
         ),
       ),
       otherMessageTheme: MessageTheme(
-        reactionsBackgroundColor: colorTheme.greyGainsboro,
+        reactionsBackgroundColor: colorTheme.disabled,
-        reactionsBorderColor: colorTheme.white,
+        reactionsBorderColor: colorTheme.barsBg,
-        reactionsMaskColor: colorTheme.whiteSnow,
+        reactionsMaskColor: colorTheme.appBg,
         messageText: textTheme.body,
-        createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
+        createdAt:
-        messageAuthor: textTheme.footnote.copyWith(color: colorTheme.grey),
+            textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis),
+        messageAuthor:
+            textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis),
         replies: textTheme.footnoteBold.copyWith(color: accentColor),
         messageLinks: TextStyle(
           color: accentColor,
         ),
-        messageBackgroundColor: colorTheme.white,
+        messageBackgroundColor: colorTheme.barsBg,
-        messageBorderColor: colorTheme.greyWhisper,
+        messageBorderColor: colorTheme.borders,
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(20),
           constraints: const BoxConstraints.tightFor(
@@ -320,23 +325,23 @@ class StreamChatThemeData {
       messageInputTheme: MessageInputTheme(
         borderRadius: BorderRadius.circular(20),
         sendAnimationDuration: const Duration(milliseconds: 300),
-        actionButtonColor: colorTheme.accentBlue,
+        actionButtonColor: colorTheme.accentPrimary,
-        actionButtonIdleColor: colorTheme.grey,
+        actionButtonIdleColor: colorTheme.textLowEmphasis,
-        expandButtonColor: colorTheme.accentBlue,
+        expandButtonColor: colorTheme.accentPrimary,
-        sendButtonColor: colorTheme.accentBlue,
+        sendButtonColor: colorTheme.accentPrimary,
-        sendButtonIdleColor: colorTheme.greyGainsboro,
+        sendButtonIdleColor: colorTheme.disabled,
-        inputBackground: colorTheme.white,
+        inputBackground: colorTheme.barsBg,
         inputTextStyle: textTheme.body,
         idleBorderGradient: LinearGradient(
           colors: [
-            colorTheme.greyGainsboro,
+            colorTheme.disabled,
-            colorTheme.greyGainsboro,
+            colorTheme.disabled,
           ],
         ),
         activeBorderGradient: LinearGradient(
           colors: [
-            colorTheme.greyGainsboro,
+            colorTheme.disabled,
-            colorTheme.greyGainsboro,
+            colorTheme.disabled,
           ],
         ),
       ),
@@ -347,7 +352,7 @@ class StreamChatThemeData {
             final theme = StreamChatTheme.of(context);
             return StreamSvgIcon.loveReaction(
               color: highlighted
-                  ? theme.colorTheme.accentBlue
+                  ? theme.colorTheme.accentPrimary
                   : theme.primaryIconTheme.color!.withOpacity(.5),
               size: size,
             );
@@ -359,7 +364,7 @@ class StreamChatThemeData {
             final theme = StreamChatTheme.of(context);
             return StreamSvgIcon.thumbsUpReaction(
               color: highlighted
-                  ? theme.colorTheme.accentBlue
+                  ? theme.colorTheme.accentPrimary
                   : theme.primaryIconTheme.color!.withOpacity(.5),
               size: size,
             );
@@ -371,7 +376,7 @@ class StreamChatThemeData {
             final theme = StreamChatTheme.of(context);
             return StreamSvgIcon.thumbsDownReaction(
               color: highlighted
-                  ? theme.colorTheme.accentBlue
+                  ? theme.colorTheme.accentPrimary
                   : theme.primaryIconTheme.color!.withOpacity(.5),
               size: size,
             );
@@ -383,7 +388,7 @@ class StreamChatThemeData {
             final theme = StreamChatTheme.of(context);
             return StreamSvgIcon.lolReaction(
               color: highlighted
-                  ? theme.colorTheme.accentBlue
+                  ? theme.colorTheme.accentPrimary
                   : theme.primaryIconTheme.color!.withOpacity(.5),
               size: size,
             );
@@ -395,7 +400,7 @@ class StreamChatThemeData {
             final theme = StreamChatTheme.of(context);
             return StreamSvgIcon.wutReaction(
               color: highlighted
-                  ? theme.colorTheme.accentBlue
+                  ? theme.colorTheme.accentPrimary
                   : theme.primaryIconTheme.color!.withOpacity(.5),
               size: size,
             );
@@ -572,17 +577,17 @@ class TextTheme {
 class ColorTheme {
   /// Initialise with light theme
   ColorTheme.light({
-    this.black = const Color(0xff000000),
+    this.textHighEmphasis = const Color(0xff000000),
-    this.grey = const Color(0xff7a7a7a),
+    this.textLowEmphasis = const Color(0xff7a7a7a),
-    this.greyGainsboro = const Color(0xffdbdbdb),
+    this.disabled = const Color(0xffdbdbdb),
-    this.greyWhisper = const Color(0xffecebeb),
+    this.borders = const Color(0xffecebeb),
-    this.whiteSmoke = const Color(0xfff2f2f2),
+    this.inputBg = const Color(0xfff2f2f2),
-    this.whiteSnow = const Color(0xfffcfcfc),
+    this.appBg = const Color(0xfffcfcfc),
-    this.white = const Color(0xffffffff),
+    this.barsBg = const Color(0xffffffff),
-    this.blueAlice = const Color(0xffe9f2ff),
+    this.linkBg = const Color(0xffe9f2ff),
-    this.accentBlue = const Color(0xff005FFF),
+    this.accentPrimary = const Color(0xff005FFF),
-    this.accentRed = const Color(0xffFF3842),
+    this.accentError = const Color(0xffFF3842),
-    this.accentGreen = const Color(0xff20E070),
+    this.accentInfo = const Color(0xff20E070),
     this.highlight = const Color(0xfffbf4dd),
     this.overlay = const Color.fromRGBO(0, 0, 0, 0.2),
     this.overlayDark = const Color.fromRGBO(0, 0, 0, 0.6),
@@ -604,17 +609,17 @@ class ColorTheme {
 
   /// Initialise with dark theme
   ColorTheme.dark({
-    this.black = const Color(0xffffffff),
+    this.textHighEmphasis = const Color(0xffffffff),
-    this.grey = const Color(0xff7a7a7a),
+    this.textLowEmphasis = const Color(0xff7a7a7a),
-    this.greyGainsboro = const Color(0xff2d2f2f),
+    this.disabled = const Color(0xff2d2f2f),
-    this.greyWhisper = const Color(0xff1c1e22),
+    this.borders = const Color(0xff1c1e22),
-    this.whiteSmoke = const Color(0xff13151b),
+    this.inputBg = const Color(0xff13151b),
-    this.whiteSnow = const Color(0xff070A0D),
+    this.appBg = const Color(0xff070A0D),
-    this.white = const Color(0xff101418),
+    this.barsBg = const Color(0xff101418),
-    this.blueAlice = const Color(0xff00193D),
+    this.linkBg = const Color(0xff00193D),
-    this.accentBlue = const Color(0xff005FFF),
+    this.accentPrimary = const Color(0xff005FFF),
-    this.accentRed = const Color(0xffFF3742),
+    this.accentError = const Color(0xffFF3742),
-    this.accentGreen = const Color(0xff20E070),
+    this.accentInfo = const Color(0xff20E070),
     this.borderTop = const Effect(
       sigmaX: 0,
       sigmaY: -1,
@@ -657,37 +662,37 @@ class ColorTheme {
   }) : brightness = Brightness.dark;
 
   ///
-  final Color black;
+  final Color textHighEmphasis;
 
   ///
-  final Color grey;
+  final Color textLowEmphasis;
 
   ///
-  final Color greyGainsboro;
+  final Color disabled;
 
   ///
-  final Color greyWhisper;
+  final Color borders;
 
   ///
-  final Color whiteSmoke;
+  final Color inputBg;
 
   ///
-  final Color whiteSnow;
+  final Color appBg;
 
   ///
-  final Color white;
+  final Color barsBg;
 
   ///
-  final Color blueAlice;
+  final Color linkBg;
 
   ///
-  final Color accentBlue;
+  final Color accentPrimary;
 
   ///
-  final Color accentRed;
+  final Color accentError;
 
   ///
-  final Color accentGreen;
+  final Color accentInfo;
 
   ///
   final Effect borderTop;
@@ -719,17 +724,17 @@ class ColorTheme {
   /// Copy with theme
   ColorTheme copyWith({
     Brightness brightness = Brightness.light,
-    Color? black,
+    Color? textHighEmphasis,
-    Color? grey,
+    Color? textLowEmphasis,
-    Color? greyGainsboro,
+    Color? disabled,
-    Color? greyWhisper,
+    Color? borders,
-    Color? whiteSmoke,
+    Color? inputBg,
-    Color? whiteSnow,
+    Color? appBg,
-    Color? white,
+    Color? barsBg,
-    Color? blueAlice,
+    Color? linkBg,
-    Color? accentBlue,
+    Color? accentPrimary,
-    Color? accentRed,
+    Color? accentError,
-    Color? accentGreen,
+    Color? accentInfo,
     Effect? borderTop,
     Effect? borderBottom,
     Effect? shadowIconButton,
@@ -741,17 +746,17 @@ class ColorTheme {
   }) =>
       brightness == Brightness.light
           ? ColorTheme.light(
-              black: black ?? this.black,
+              textHighEmphasis: textHighEmphasis ?? this.textHighEmphasis,
-              grey: grey ?? this.grey,
+              textLowEmphasis: textLowEmphasis ?? this.textLowEmphasis,
-              greyGainsboro: greyGainsboro ?? this.greyGainsboro,
+              disabled: disabled ?? this.disabled,
-              greyWhisper: greyWhisper ?? this.greyWhisper,
+              borders: borders ?? this.borders,
-              whiteSmoke: whiteSmoke ?? this.whiteSmoke,
+              inputBg: inputBg ?? this.inputBg,
-              whiteSnow: whiteSnow ?? this.whiteSnow,
+              appBg: appBg ?? this.appBg,
-              white: white ?? this.white,
+              barsBg: barsBg ?? this.barsBg,
-              blueAlice: blueAlice ?? this.blueAlice,
+              linkBg: linkBg ?? this.linkBg,
-              accentBlue: accentBlue ?? this.accentBlue,
+              accentPrimary: accentPrimary ?? this.accentPrimary,
-              accentRed: accentRed ?? this.accentRed,
+              accentError: accentError ?? this.accentError,
-              accentGreen: accentGreen ?? this.accentGreen,
+              accentInfo: accentInfo ?? this.accentInfo,
               borderTop: borderTop ?? this.borderTop,
               borderBottom: borderBottom ?? this.borderBottom,
               shadowIconButton: shadowIconButton ?? this.shadowIconButton,
@@ -762,17 +767,17 @@ class ColorTheme {
               bgGradient: bgGradient ?? this.bgGradient,
             )
           : ColorTheme.dark(
-              black: black ?? this.black,
+              textHighEmphasis: textHighEmphasis ?? this.textHighEmphasis,
-              grey: grey ?? this.grey,
+              textLowEmphasis: textLowEmphasis ?? this.textLowEmphasis,
-              greyGainsboro: greyGainsboro ?? this.greyGainsboro,
+              disabled: disabled ?? this.disabled,
-              greyWhisper: greyWhisper ?? this.greyWhisper,
+              borders: borders ?? this.borders,
-              whiteSmoke: whiteSmoke ?? this.whiteSmoke,
+              inputBg: inputBg ?? this.inputBg,
-              whiteSnow: whiteSnow ?? this.whiteSnow,
+              appBg: appBg ?? this.appBg,
-              white: white ?? this.white,
+              barsBg: barsBg ?? this.barsBg,
-              blueAlice: blueAlice ?? this.blueAlice,
+              linkBg: linkBg ?? this.linkBg,
-              accentBlue: accentBlue ?? this.accentBlue,
+              accentPrimary: accentPrimary ?? this.accentPrimary,
-              accentRed: accentRed ?? this.accentRed,
+              accentError: accentError ?? this.accentError,
-              accentGreen: accentGreen ?? this.accentGreen,
+              accentInfo: accentInfo ?? this.accentInfo,
               borderTop: borderTop ?? this.borderTop,
               borderBottom: borderBottom ?? this.borderBottom,
               shadowIconButton: shadowIconButton ?? this.shadowIconButton,
@@ -787,17 +792,17 @@ class ColorTheme {
   ColorTheme merge(ColorTheme? other) {
     if (other == null) return this;
     return copyWith(
-      black: other.black,
+      textHighEmphasis: other.textHighEmphasis,
-      grey: other.grey,
+      textLowEmphasis: other.textLowEmphasis,
-      greyGainsboro: other.greyGainsboro,
+      disabled: other.disabled,
-      greyWhisper: other.greyWhisper,
+      borders: other.borders,
-      whiteSmoke: other.whiteSmoke,
+      inputBg: other.inputBg,
-      whiteSnow: other.whiteSnow,
+      appBg: other.appBg,
-      white: other.white,
+      barsBg: other.barsBg,
-      blueAlice: other.blueAlice,
+      linkBg: other.linkBg,
-      accentBlue: other.accentBlue,
+      accentPrimary: other.accentPrimary,
-      accentRed: other.accentRed,
+      accentError: other.accentError,
-      accentGreen: other.accentGreen,
+      accentInfo: other.accentInfo,
       highlight: other.highlight,
       overlay: other.overlay,
       overlayDark: other.overlayDark,

packages/stream_chat_flutter/lib/src/swipeable.dart

@@ -151,9 +151,8 @@ class _SwipeableState extends State<Swipeable> with TickerProviderStateMixin {
                       decoration: BoxDecoration(
                         shape: BoxShape.circle,
                         border: Border.all(
-                          color: StreamChatTheme.of(context)
+                          color:
-                              .colorTheme
+                              StreamChatTheme.of(context).colorTheme.disabled,
-                              .greyGainsboro,
                         ),
                       ),
                       child: widget.backgroundIcon,

packages/stream_chat_flutter/lib/src/system_message.dart

@@ -32,7 +32,7 @@ class SystemMessage extends StatelessWidget {
         textAlign: TextAlign.center,
         softWrap: true,
         style: theme.textTheme.captionBold.copyWith(
-          color: theme.colorTheme.grey,
+          color: theme.colorTheme.textLowEmphasis,
         ),
       ),
     );

packages/stream_chat_flutter/lib/src/upload_progress_indicator.dart

@@ -59,7 +59,7 @@ class UploadProgressIndicator extends StatelessWidget {
             '${_percentage.toInt()}%',
             style: textStyle ??
                 theme.textTheme.footnote.copyWith(
-                  color: theme.colorTheme.white,
+                  color: theme.colorTheme.barsBg,
                 ),
           ),
         ],

packages/stream_chat_flutter/lib/src/url_attachment.dart

@@ -60,7 +60,7 @@ class UrlAttachment extends StatelessWidget {
                         borderRadius: const BorderRadius.only(
                           topRight: Radius.circular(16),
                         ),
-                        color: chatThemeData.colorTheme.blueAlice,
+                        color: chatThemeData.colorTheme.linkBg,
                       ),
                       child: Padding(
                         padding: const EdgeInsets.only(
@@ -71,7 +71,7 @@ class UrlAttachment extends StatelessWidget {
                         child: Text(
                           hostDisplayName,
                           style: chatThemeData.textTheme.bodyBold.copyWith(
-                            color: chatThemeData.colorTheme.accentBlue,
+                            color: chatThemeData.colorTheme.accentPrimary,
                           ),
                         ),
                       ),

packages/stream_chat_flutter/lib/src/user_avatar.dart

@@ -70,7 +70,7 @@ class UserAvatar extends StatelessWidget {
           constraints: constraints ??
               streamChatTheme.ownMessageTheme.avatarTheme?.constraints,
           decoration: BoxDecoration(
-            color: streamChatTheme.colorTheme.accentBlue,
+            color: streamChatTheme.colorTheme.accentPrimary,
           ),
           child: hasImage
               ? CachedNetworkImage(
@@ -95,7 +95,7 @@ class UserAvatar extends StatelessWidget {
         child: Container(
           constraints: constraints ??
               streamChatTheme.ownMessageTheme.avatarTheme?.constraints,
-          color: selectionColor ?? streamChatTheme.colorTheme.accentBlue,
+          color: selectionColor ?? streamChatTheme.colorTheme.accentPrimary,
           child: Padding(
             padding: EdgeInsets.all(selectionThickness),
             child: avatar,
@@ -115,7 +115,7 @@ class UserAvatar extends StatelessWidget {
                 alignment: onlineIndicatorAlignment,
                 child: Material(
                   type: MaterialType.circle,
-                  color: streamChatTheme.colorTheme.white,
+                  color: streamChatTheme.colorTheme.barsBg,
                   child: Container(
                     margin: const EdgeInsets.all(2),
                     constraints: onlineIndicatorConstraints ??
@@ -125,7 +125,7 @@ class UserAvatar extends StatelessWidget {
                         ),
                     child: Material(
                       shape: const CircleBorder(),
-                      color: streamChatTheme.colorTheme.accentGreen,
+                      color: streamChatTheme.colorTheme.accentInfo,
                     ),
                   ),
                 ),

packages/stream_chat_flutter/lib/src/user_item.dart

@@ -75,7 +75,7 @@ class UserItem extends StatelessWidget {
       ),
       trailing: selected
           ? StreamSvgIcon.checkSend(
-              color: chatThemeData.colorTheme.accentBlue,
+              color: chatThemeData.colorTheme.accentPrimary,
             )
           : null,
       title: Text(
@@ -92,8 +92,8 @@ class UserItem extends StatelessWidget {
       user.online == true
           ? 'Online'
           : 'Last online ${Jiffy(user.lastActive).fromNow()}',
-      style: chatTheme.textTheme.footnote
+      style: chatTheme.textTheme.footnote.copyWith(
-          .copyWith(color: chatTheme.colorTheme.black.withOpacity(.5)),
+          color: chatTheme.colorTheme.textHighEmphasis.withOpacity(.5)),
     );
   }
 }

packages/stream_chat_flutter/lib/src/user_list_view.dart

@@ -285,7 +285,7 @@ class _UserListViewState extends State<UserListView>
           final chatThemeData = StreamChatTheme.of(context);
           return Container(
             key: ValueKey<String>('HEADER-$header'),
-            color: chatThemeData.colorTheme.black.withOpacity(0.05),
+            color: chatThemeData.colorTheme.textHighEmphasis.withOpacity(0.05),
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
               child: Text(
@@ -293,7 +293,7 @@ class _UserListViewState extends State<UserListView>
                 style: TextStyle(
                   fontWeight: FontWeight.bold,
                   fontSize: 14.5,
-                  color: chatThemeData.colorTheme.grey,
+                  color: chatThemeData.colorTheme.textLowEmphasis,
                 ),
               ),
             ),
@@ -385,7 +385,7 @@ class _UserListViewState extends State<UserListView>
               return Container(
                 color: StreamChatTheme.of(context)
                     .colorTheme
-                    .accentRed
+                    .accentError
                     .withOpacity(.2),
                 child: const Padding(
                   padding: EdgeInsets.symmetric(vertical: 16),
@@ -408,6 +408,6 @@ class _UserListViewState extends State<UserListView>
 
   Widget _separatorBuilder(context, i) => Container(
         height: 1,
-        color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+        color: StreamChatTheme.of(context).colorTheme.borders,
       );
 }

packages/stream_chat_flutter/lib/src/utils.dart

@@ -31,7 +31,7 @@ Future<bool?> showConfirmationDialog(
   final chatThemeData = StreamChatTheme.of(context);
   return showModalBottomSheet(
       useRootNavigator: false,
-      backgroundColor: chatThemeData.colorTheme.white,
+      backgroundColor: chatThemeData.colorTheme.barsBg,
       context: context,
       shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
@@ -75,7 +75,7 @@ Future<bool?> showConfirmationDialog(
                           child: Text(
                             cancelText,
                             style: chatThemeData.textTheme.bodyBold.copyWith(
-                                color: chatThemeData.colorTheme.black
+                                color: chatThemeData.colorTheme.textHighEmphasis
                                     .withOpacity(0.5)),
                           ),
                         ),
@@ -91,7 +91,7 @@ Future<bool?> showConfirmationDialog(
                         child: Text(
                           okText,
                           style: chatThemeData.textTheme.bodyBold.copyWith(
-                              color: chatThemeData.colorTheme.accentRed),
+                              color: chatThemeData.colorTheme.accentError),
                         ),
                       ),
                     ),
@@ -116,7 +116,8 @@ Future<bool?> showInfoDialog(
   final chatThemeData = StreamChatTheme.of(context);
   return showModalBottomSheet(
     useRootNavigator: false,
-    backgroundColor: theme?.colorTheme.white ?? chatThemeData.colorTheme.white,
+    backgroundColor:
+        theme?.colorTheme.barsBg ?? chatThemeData.colorTheme.barsBg,
     context: context,
     shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
@@ -147,8 +148,8 @@ Future<bool?> showInfoDialog(
             height: 36,
           ),
           Container(
-            color: theme?.colorTheme.black.withOpacity(.08) ??
+            color: theme?.colorTheme.textHighEmphasis.withOpacity(.08) ??
-                chatThemeData.colorTheme.black.withOpacity(.08),
+                chatThemeData.colorTheme.textHighEmphasis.withOpacity(.08),
             height: 1,
           ),
           Center(
@@ -159,8 +160,8 @@ Future<bool?> showInfoDialog(
               child: Text(
                 okText,
                 style: TextStyle(
-                  color: theme?.colorTheme.black.withOpacity(0.5) ??
+                  color: theme?.colorTheme.textHighEmphasis.withOpacity(0.5) ??
-                      chatThemeData.colorTheme.accentBlue,
+                      chatThemeData.colorTheme.accentPrimary,
                   fontWeight: FontWeight.w400,
                 ),
               ),

packages/stream_chat_flutter/lib/src/video_thumbnail_image.dart

@@ -94,8 +94,8 @@ class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
                   constraints: const BoxConstraints.expand(),
                   child: widget.placeholderBuilder?.call(context) ??
                       Shimmer.fromColors(
-                        baseColor: _streamChatTheme.colorTheme.greyGainsboro,
+                        baseColor: _streamChatTheme.colorTheme.disabled,
-                        highlightColor: _streamChatTheme.colorTheme.whiteSmoke,
+                        highlightColor: _streamChatTheme.colorTheme.inputBg,
                         child: Image.asset(
                           'images/placeholder.png',
                           fit: BoxFit.cover,

packages/stream_chat_flutter_core/example/lib/main.dart

@@ -203,9 +203,9 @@ class _MessageScreenState extends State<MessageScreen> {
     final channel = StreamChannel.of(context).channel;
     return Scaffold(
       appBar: AppBar(
-        title: StreamBuilder<List<User>>(
+        title: StreamBuilder<Iterable<User>>(
-          initialData: channel.state?.typingEvents,
+          initialData: channel.state?.typingEvents.keys,
-          stream: channel.state?.typingEventsStream,
+          stream: channel.state?.typingEventsStream.map((it) => it.keys),
           builder: (context, snapshot) {
             if (snapshot.hasData && snapshot.data!.isNotEmpty) {
               return Text('${snapshot.data!.first.name} is typing...');
@@ -344,7 +344,7 @@ extension on Channel {
   String? get name {
     final _channelName = extraData['name'];
     if (_channelName != null) {
-      return _channelName;
+      return _channelName as String;
     } else {
       return cid;
     }