rename colors

This commit is contained in:
Salvatore Giordano
2021-06-29 16:12:51 +02:00
parent 9d4564151e
commit bc0a70ad25
46 changed files with 379 additions and 355 deletions
@@ -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()),
@@ -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),
@@ -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,
),
),
@@ -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,
),
),
);
@@ -75,12 +75,14 @@ class AttachmentError extends StatelessWidget {
child: Container(
width: size?.width,
height: size?.height,
color:
StreamChatTheme.of(context).colorTheme.accentRed.withOpacity(.1),
color: StreamChatTheme.of(context)
.colorTheme
.accentError
.withOpacity(.1),
child: Center(
child: Icon(
Icons.error_outline,
color: StreamChatTheme.of(context).colorTheme.black,
color: StreamChatTheme.of(context).colorTheme.textHighEmphasis,
),
),
),
@@ -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,
highlightColor: colorTheme.whiteSmoke,
baseColor: colorTheme.disabled,
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),
@@ -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,
highlightColor: colorTheme.whiteSmoke,
baseColor: colorTheme.disabled,
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,
),
@@ -103,8 +103,8 @@ class ImageAttachment extends AttachmentWidget {
);
final colorTheme = StreamChatTheme.of(context).colorTheme;
return Shimmer.fromColors(
baseColor: colorTheme.greyGainsboro,
highlightColor: colorTheme.whiteSmoke,
baseColor: colorTheme.disabled,
highlightColor: colorTheme.inputBg,
child: image,
);
},
@@ -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,
),
),
),
@@ -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)
@@ -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) {
@@ -110,8 +110,8 @@ class ChannelImage extends StatelessWidget {
.channelPreviewTheme.avatarTheme?.constraints,
onTap: onTap != null ? (_) => onTap!() : null,
selected: selected,
selectionColor:
selectionColor ?? chatThemeData.colorTheme.accentBlue,
selectionColor: selectionColor ??
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,
@@ -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,
),
),
),
@@ -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,
),
),
),
@@ -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,
highlightColor: chatThemeData.colorTheme.whiteSmoke,
baseColor: chatThemeData.colorTheme.disabled,
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,
highlightColor: chatThemeData.colorTheme.whiteSmoke,
baseColor: chatThemeData.colorTheme.disabled,
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),
@@ -55,7 +55,7 @@ class DateDivider extends StatelessWidget {
child: Text(
dayInfo,
style: chatThemeData.textTheme.footnote.copyWith(
color: chatThemeData.colorTheme.white,
color: chatThemeData.colorTheme.barsBg,
),
),
),
@@ -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.black.withAlpha(24),
? chatThemeData.colorTheme.barsBg.withAlpha(24)
: chatThemeData.colorTheme.textHighEmphasis.withAlpha(24),
),
),
child: Padding(
@@ -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(
@@ -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),
),
],
@@ -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);
@@ -46,8 +46,8 @@ class InfoTile extends StatelessWidget {
childAnchor: childAnchor ?? Alignment.bottomCenter,
portal: Container(
height: 25,
color:
backgroundColor ?? chatThemeData.colorTheme.grey.withOpacity(0.9),
color: backgroundColor ??
chatThemeData.colorTheme.textLowEmphasis.withOpacity(0.9),
child: Center(
child: Text(
message,
@@ -90,8 +90,8 @@ class _MediaListViewState extends State<MediaListView> {
? 1.0
: 0.0,
child: Container(
color:
chatThemeData.colorTheme.black.withOpacity(0.5),
color: chatThemeData.colorTheme.textHighEmphasis
.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,
),
),
),
@@ -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,
),
),
],
@@ -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(
@@ -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.white,
? _streamChatTheme.colorTheme.accentPrimary
: _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:
_streamChatTheme.colorTheme.black.withOpacity(.5),
color: _streamChatTheme.colorTheme.textHighEmphasis
.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.black.withOpacity(0.2));
? streamChatThemeData.colorTheme.accentPrimary
: 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.black.withOpacity(0.2));
? streamChatThemeData.colorTheme.textHighEmphasis
.withOpacity(0.5)
: streamChatThemeData.colorTheme.textHighEmphasis
.withOpacity(0.2));
case 2:
return _attachmentContainsFile && _attachments.isNotEmpty
? streamChatThemeData.colorTheme.black.withOpacity(0.2)
: streamChatThemeData.colorTheme.black.withOpacity(0.5);
? streamChatThemeData.colorTheme.textHighEmphasis.withOpacity(0.2)
: streamChatThemeData.colorTheme.textHighEmphasis
.withOpacity(0.5);
case 3:
return _attachmentContainsFile && _attachments.isNotEmpty
? streamChatThemeData.colorTheme.black.withOpacity(0.2)
: streamChatThemeData.colorTheme.black.withOpacity(0.5);
? streamChatThemeData.colorTheme.textHighEmphasis.withOpacity(0.2)
: 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:
_streamChatTheme.colorTheme.accentBlue,
color: _streamChatTheme
.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,
highlightColor: _streamChatTheme.colorTheme.whiteSmoke,
baseColor: _streamChatTheme.colorTheme.disabled,
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
.copyWith(color: _streamChatTheme.colorTheme.accentBlue),
style: _streamChatTheme.textTheme.bodyBold.copyWith(
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,
),
),
),
@@ -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'),
),
@@ -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,
),
@@ -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,
),
),
),
@@ -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;
@@ -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(
@@ -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;
}
@@ -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.black.withOpacity(.5),
? chatThemeData.colorTheme.accentPrimary
: chatThemeData.colorTheme.textHighEmphasis.withOpacity(.5),
),
);
}
@@ -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(
@@ -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) {
@@ -101,8 +101,8 @@ class StreamChatState extends State<StreamChat> {
return Theme(
data: materialTheme.copyWith(
primaryIconTheme: streamTheme.primaryIconTheme,
accentColor: streamTheme.colorTheme.accentBlue,
scaffoldBackgroundColor: streamTheme.colorTheme.white,
accentColor: streamTheme.colorTheme.accentPrimary,
scaffoldBackgroundColor: streamTheme.colorTheme.barsBg,
),
child: StreamChatCore(
client: client,
@@ -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 iconTheme = IconThemeData(color: colorTheme.black.withOpacity(.5));
final accentColor = colorTheme.accentPrimary;
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,
reactionsBackgroundColor: colorTheme.white,
reactionsBorderColor: colorTheme.greyWhisper,
reactionsMaskColor: colorTheme.whiteSnow,
messageBorderColor: colorTheme.greyGainsboro,
messageBackgroundColor: colorTheme.disabled,
reactionsBackgroundColor: colorTheme.barsBg,
reactionsBorderColor: colorTheme.borders,
reactionsMaskColor: colorTheme.appBg,
messageBorderColor: colorTheme.disabled,
avatarTheme: AvatarTheme(
borderRadius: BorderRadius.circular(20),
constraints: const BoxConstraints.tightFor(
@@ -297,18 +300,20 @@ class StreamChatThemeData {
),
),
otherMessageTheme: MessageTheme(
reactionsBackgroundColor: colorTheme.greyGainsboro,
reactionsBorderColor: colorTheme.white,
reactionsMaskColor: colorTheme.whiteSnow,
reactionsBackgroundColor: colorTheme.disabled,
reactionsBorderColor: colorTheme.barsBg,
reactionsMaskColor: colorTheme.appBg,
messageText: textTheme.body,
createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
messageAuthor: textTheme.footnote.copyWith(color: colorTheme.grey),
createdAt:
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,
messageBorderColor: colorTheme.greyWhisper,
messageBackgroundColor: colorTheme.barsBg,
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,
actionButtonIdleColor: colorTheme.grey,
expandButtonColor: colorTheme.accentBlue,
sendButtonColor: colorTheme.accentBlue,
sendButtonIdleColor: colorTheme.greyGainsboro,
inputBackground: colorTheme.white,
actionButtonColor: colorTheme.accentPrimary,
actionButtonIdleColor: colorTheme.textLowEmphasis,
expandButtonColor: colorTheme.accentPrimary,
sendButtonColor: colorTheme.accentPrimary,
sendButtonIdleColor: colorTheme.disabled,
inputBackground: colorTheme.barsBg,
inputTextStyle: textTheme.body,
idleBorderGradient: LinearGradient(
colors: [
colorTheme.greyGainsboro,
colorTheme.greyGainsboro,
colorTheme.disabled,
colorTheme.disabled,
],
),
activeBorderGradient: LinearGradient(
colors: [
colorTheme.greyGainsboro,
colorTheme.greyGainsboro,
colorTheme.disabled,
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.grey = const Color(0xff7a7a7a),
this.greyGainsboro = const Color(0xffdbdbdb),
this.greyWhisper = const Color(0xffecebeb),
this.whiteSmoke = const Color(0xfff2f2f2),
this.whiteSnow = const Color(0xfffcfcfc),
this.white = const Color(0xffffffff),
this.blueAlice = const Color(0xffe9f2ff),
this.accentBlue = const Color(0xff005FFF),
this.accentRed = const Color(0xffFF3842),
this.accentGreen = const Color(0xff20E070),
this.textHighEmphasis = const Color(0xff000000),
this.textLowEmphasis = const Color(0xff7a7a7a),
this.disabled = const Color(0xffdbdbdb),
this.borders = const Color(0xffecebeb),
this.inputBg = const Color(0xfff2f2f2),
this.appBg = const Color(0xfffcfcfc),
this.barsBg = const Color(0xffffffff),
this.linkBg = const Color(0xffe9f2ff),
this.accentPrimary = const Color(0xff005FFF),
this.accentError = const Color(0xffFF3842),
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.grey = const Color(0xff7a7a7a),
this.greyGainsboro = const Color(0xff2d2f2f),
this.greyWhisper = const Color(0xff1c1e22),
this.whiteSmoke = const Color(0xff13151b),
this.whiteSnow = const Color(0xff070A0D),
this.white = const Color(0xff101418),
this.blueAlice = const Color(0xff00193D),
this.accentBlue = const Color(0xff005FFF),
this.accentRed = const Color(0xffFF3742),
this.accentGreen = const Color(0xff20E070),
this.textHighEmphasis = const Color(0xffffffff),
this.textLowEmphasis = const Color(0xff7a7a7a),
this.disabled = const Color(0xff2d2f2f),
this.borders = const Color(0xff1c1e22),
this.inputBg = const Color(0xff13151b),
this.appBg = const Color(0xff070A0D),
this.barsBg = const Color(0xff101418),
this.linkBg = const Color(0xff00193D),
this.accentPrimary = const Color(0xff005FFF),
this.accentError = const Color(0xffFF3742),
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? grey,
Color? greyGainsboro,
Color? greyWhisper,
Color? whiteSmoke,
Color? whiteSnow,
Color? white,
Color? blueAlice,
Color? accentBlue,
Color? accentRed,
Color? accentGreen,
Color? textHighEmphasis,
Color? textLowEmphasis,
Color? disabled,
Color? borders,
Color? inputBg,
Color? appBg,
Color? barsBg,
Color? linkBg,
Color? accentPrimary,
Color? accentError,
Color? accentInfo,
Effect? borderTop,
Effect? borderBottom,
Effect? shadowIconButton,
@@ -741,17 +746,17 @@ class ColorTheme {
}) =>
brightness == Brightness.light
? ColorTheme.light(
black: black ?? this.black,
grey: grey ?? this.grey,
greyGainsboro: greyGainsboro ?? this.greyGainsboro,
greyWhisper: greyWhisper ?? this.greyWhisper,
whiteSmoke: whiteSmoke ?? this.whiteSmoke,
whiteSnow: whiteSnow ?? this.whiteSnow,
white: white ?? this.white,
blueAlice: blueAlice ?? this.blueAlice,
accentBlue: accentBlue ?? this.accentBlue,
accentRed: accentRed ?? this.accentRed,
accentGreen: accentGreen ?? this.accentGreen,
textHighEmphasis: textHighEmphasis ?? this.textHighEmphasis,
textLowEmphasis: textLowEmphasis ?? this.textLowEmphasis,
disabled: disabled ?? this.disabled,
borders: borders ?? this.borders,
inputBg: inputBg ?? this.inputBg,
appBg: appBg ?? this.appBg,
barsBg: barsBg ?? this.barsBg,
linkBg: linkBg ?? this.linkBg,
accentPrimary: accentPrimary ?? this.accentPrimary,
accentError: accentError ?? this.accentError,
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,
grey: grey ?? this.grey,
greyGainsboro: greyGainsboro ?? this.greyGainsboro,
greyWhisper: greyWhisper ?? this.greyWhisper,
whiteSmoke: whiteSmoke ?? this.whiteSmoke,
whiteSnow: whiteSnow ?? this.whiteSnow,
white: white ?? this.white,
blueAlice: blueAlice ?? this.blueAlice,
accentBlue: accentBlue ?? this.accentBlue,
accentRed: accentRed ?? this.accentRed,
accentGreen: accentGreen ?? this.accentGreen,
textHighEmphasis: textHighEmphasis ?? this.textHighEmphasis,
textLowEmphasis: textLowEmphasis ?? this.textLowEmphasis,
disabled: disabled ?? this.disabled,
borders: borders ?? this.borders,
inputBg: inputBg ?? this.inputBg,
appBg: appBg ?? this.appBg,
barsBg: barsBg ?? this.barsBg,
linkBg: linkBg ?? this.linkBg,
accentPrimary: accentPrimary ?? this.accentPrimary,
accentError: accentError ?? this.accentError,
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,
grey: other.grey,
greyGainsboro: other.greyGainsboro,
greyWhisper: other.greyWhisper,
whiteSmoke: other.whiteSmoke,
whiteSnow: other.whiteSnow,
white: other.white,
blueAlice: other.blueAlice,
accentBlue: other.accentBlue,
accentRed: other.accentRed,
accentGreen: other.accentGreen,
textHighEmphasis: other.textHighEmphasis,
textLowEmphasis: other.textLowEmphasis,
disabled: other.disabled,
borders: other.borders,
inputBg: other.inputBg,
appBg: other.appBg,
barsBg: other.barsBg,
linkBg: other.linkBg,
accentPrimary: other.accentPrimary,
accentError: other.accentError,
accentInfo: other.accentInfo,
highlight: other.highlight,
overlay: other.overlay,
overlayDark: other.overlayDark,
@@ -151,9 +151,8 @@ class _SwipeableState extends State<Swipeable> with TickerProviderStateMixin {
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: StreamChatTheme.of(context)
.colorTheme
.greyGainsboro,
color:
StreamChatTheme.of(context).colorTheme.disabled,
),
),
child: widget.backgroundIcon,
@@ -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,
),
),
);
@@ -59,7 +59,7 @@ class UploadProgressIndicator extends StatelessWidget {
'${_percentage.toInt()}%',
style: textStyle ??
theme.textTheme.footnote.copyWith(
color: theme.colorTheme.white,
color: theme.colorTheme.barsBg,
),
),
],
@@ -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,
),
),
),
@@ -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,
),
),
),
@@ -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
.copyWith(color: chatTheme.colorTheme.black.withOpacity(.5)),
style: chatTheme.textTheme.footnote.copyWith(
color: chatTheme.colorTheme.textHighEmphasis.withOpacity(.5)),
);
}
}
@@ -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,
);
}
@@ -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) ??
chatThemeData.colorTheme.black.withOpacity(.08),
color: theme?.colorTheme.textHighEmphasis.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) ??
chatThemeData.colorTheme.accentBlue,
color: theme?.colorTheme.textHighEmphasis.withOpacity(0.5) ??
chatThemeData.colorTheme.accentPrimary,
fontWeight: FontWeight.w400,
),
),
@@ -94,8 +94,8 @@ class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
constraints: const BoxConstraints.expand(),
child: widget.placeholderBuilder?.call(context) ??
Shimmer.fromColors(
baseColor: _streamChatTheme.colorTheme.greyGainsboro,
highlightColor: _streamChatTheme.colorTheme.whiteSmoke,
baseColor: _streamChatTheme.colorTheme.disabled,
highlightColor: _streamChatTheme.colorTheme.inputBg,
child: Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
@@ -203,9 +203,9 @@ class _MessageScreenState extends State<MessageScreen> {
final channel = StreamChannel.of(context).channel;
return Scaffold(
appBar: AppBar(
title: StreamBuilder<List<User>>(
initialData: channel.state?.typingEvents,
stream: channel.state?.typingEventsStream,
title: StreamBuilder<Iterable<User>>(
initialData: channel.state?.typingEvents.keys,
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;
}