diff --git a/example/lib/choose_user_page.dart b/example/lib/choose_user_page.dart index 8d88cb1b..205f2581 100644 --- a/example/lib/choose_user_page.dart +++ b/example/lib/choose_user_page.dart @@ -171,7 +171,9 @@ class ChooseUserPage extends StatelessWidget { .textTheme .footnote .copyWith( - color: Color(0xff7A7A7A), + color: StreamChatTheme.of(context) + .colorTheme + .grey, ), ), trailing: SvgPicture.asset( @@ -202,7 +204,8 @@ class ChooseUserPage extends StatelessWidget { .textTheme .footnote .copyWith( - color: Color(0xff7A7A7A), + color: + StreamChatTheme.of(context).colorTheme.grey, ), ), trailing: SvgPicture.asset( diff --git a/lib/src/channel_bottom_sheet.dart b/lib/src/channel_bottom_sheet.dart index 2d16bf6d..8e65c24d 100644 --- a/lib/src/channel_bottom_sheet.dart +++ b/lib/src/channel_bottom_sheet.dart @@ -73,7 +73,7 @@ class ChannelBottomSheet extends StatelessWidget { ListTile( leading: StreamSvgIcon.userRemove( size: 24, - color: Color(0xff7A7A7A), + color: StreamChatTheme.of(context).colorTheme.grey, ), title: Text( 'Leave Group', diff --git a/lib/src/channel_list_view.dart b/lib/src/channel_list_view.dart index b18fb39c..c04f80ed 100644 --- a/lib/src/channel_list_view.dart +++ b/lib/src/channel_list_view.dart @@ -203,7 +203,9 @@ class _ChannelListViewState extends State padding: const EdgeInsets.all(8.0), child: StreamSvgIcon.message( size: 136, - color: Color(0xffDBDBDB), + color: StreamChatTheme.of(context) + .colorTheme + .greyGainsboro, ), ), Padding( @@ -227,7 +229,9 @@ class _ChannelListViewState extends State .textTheme .body .copyWith( - color: Color(0xff7A7A7A), + color: StreamChatTheme.of(context) + .colorTheme + .grey, ), ), ), @@ -311,7 +315,7 @@ class _ChannelListViewState extends State Shimmer _buildLoadingItem() { return Shimmer.fromColors( baseColor: Color(0xffE5E5E5), - highlightColor: Color(0xffffffff), + highlightColor: StreamChatTheme.of(context).colorTheme.white, child: ListTile( leading: Container( decoration: BoxDecoration( diff --git a/lib/src/message_input.dart b/lib/src/message_input.dart index e0f290fc..79189d1d 100644 --- a/lib/src/message_input.dart +++ b/lib/src/message_input.dart @@ -724,7 +724,7 @@ class MessageInputState extends State { duration: _animateContainer ? Duration(milliseconds: 300) : Duration.zero, height: _openFilePickerSection ? _filePickerSize : 0, child: Material( - color: Color(0xFFF2F2F2), + color: StreamChatTheme.of(context).colorTheme.whiteSmoke, child: Column( children: [ Row( @@ -806,7 +806,8 @@ class MessageInputState extends State { width: 40.0, height: 4.0, decoration: BoxDecoration( - color: Color(0xFFF2F2F2), + color: + StreamChatTheme.of(context).colorTheme.whiteSmoke, borderRadius: BorderRadius.circular(4.0), ), ), @@ -854,7 +855,7 @@ class MessageInputState extends State { }, child: Container( constraints: BoxConstraints.expand(), - color: Color(0xfff2f2f2), + color: StreamChatTheme.of(context).colorTheme.whiteSmoke, child: Text( 'Add more files', style: TextStyle( @@ -887,7 +888,7 @@ class MessageInputState extends State { PhotoManager.openSetting(); }, child: Container( - color: Color(0xFFF2F2F2), + color: StreamChatTheme.of(context).colorTheme.whiteSmoke, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, diff --git a/lib/src/message_list_view.dart b/lib/src/message_list_view.dart index d0743027..7452fd6d 100644 --- a/lib/src/message_list_view.dart +++ b/lib/src/message_list_view.dart @@ -342,7 +342,9 @@ class _MessageListViewState extends State { end: Alignment.bottomCenter, colors: [ Color(0XFFF7F7F7), - Color(0XFFFCFCFC), + StreamChatTheme.of(context) + .colorTheme + .whiteSmoke, ], ), ), diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 3eb52e45..f3e5b108 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -502,6 +502,7 @@ class _MessageWidgetState extends State { child: CustomPaint( size: const Size(16, 32), painter: _ThreadReplyPainter( + context: context, color: widget.messageTheme.replyThreadColor, ), ), @@ -916,7 +917,7 @@ class _MessageWidgetState extends State { if (widget.message.attachments ?.any((element) => element.ogScrapeUrl != null) == true) { - return Color(0xFFE9F2FF); + return StreamChatTheme.of(context).colorTheme.blueAlice; } if (isOnlyEmoji) { @@ -997,13 +998,14 @@ class _MessageWidgetState extends State { class _ThreadReplyPainter extends CustomPainter { final Color color; + final BuildContext context; - const _ThreadReplyPainter({@required this.color}); + const _ThreadReplyPainter({this.context, @required this.color}); @override void paint(Canvas canvas, Size size) { final paint = Paint() - ..color = color ?? Color(0XFFDBDBDB) + ..color = color ?? StreamChatTheme.of(context).colorTheme.greyGainsboro ..style = PaintingStyle.stroke ..strokeWidth = 1 ..strokeCap = StrokeCap.round; diff --git a/lib/src/stream_chat_theme.dart b/lib/src/stream_chat_theme.dart index 4739f122..d4237270 100644 --- a/lib/src/stream_chat_theme.dart +++ b/lib/src/stream_chat_theme.dart @@ -45,6 +45,9 @@ class StreamChatThemeData { /// The text themes used in the widgets final TextTheme textTheme; + /// The text themes used in the widgets + final ColorTheme colorTheme; + /// Primary color of the chat widgets final Color primaryColor; @@ -84,6 +87,7 @@ class StreamChatThemeData { /// Create a theme from scratch StreamChatThemeData({ this.textTheme, + this.colorTheme, this.primaryColor, this.secondaryColor, this.accentColor, @@ -136,6 +140,7 @@ class StreamChatThemeData { /// Creates a copy of [StreamChatThemeData] with specified attributes overridden. StreamChatThemeData copyWith({ TextTheme textTheme, + ColorTheme colorTheme, Color primaryColor, Color secondaryColor, Color accentColor, @@ -160,6 +165,16 @@ class StreamChatThemeData { headline: textTheme?.headline, headlineBold: textTheme?.headlineBold, ), + colorTheme: this.colorTheme?.copyWith( + black: colorTheme?.black, + grey: colorTheme?.grey, + greyGainsboro: colorTheme?.greyGainsboro, + greyWhisper: colorTheme?.greyWhisper, + whiteSmoke: colorTheme?.whiteSmoke, + whiteSnow: colorTheme?.whiteSnow, + white: colorTheme?.white, + blueAlice: colorTheme?.blueAlice, + ), primaryColor: primaryColor ?? this.primaryColor, secondaryColor: secondaryColor ?? this.secondaryColor, primaryIconTheme: primaryIconTheme ?? this.primaryIconTheme, @@ -233,8 +248,10 @@ class StreamChatThemeData { final accentColor = Color(0xff006cff); final isDark = theme.brightness == Brightness.dark; final textTheme = TextTheme(); + final colorTheme = isDark ? ColorTheme.dark() : ColorTheme.light(); return StreamChatThemeData( textTheme: textTheme, + colorTheme: colorTheme, secondaryColor: Color(0xffEAEAEA), accentColor: accentColor, primaryColor: isDark ? Colors.black : Colors.white, @@ -454,6 +471,78 @@ class TextTheme { } } +enum ColorThemeType { + light, + dark, +} + +class ColorTheme { + final Color black; + final Color grey; + final Color greyGainsboro; + final Color greyWhisper; + final Color whiteSmoke; + final Color whiteSnow; + final Color white; + final Color blueAlice; + + 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), + }); + + 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), + }); + + ColorTheme copyWith({ + ColorThemeType type = ColorThemeType.light, + Color black, + Color grey, + Color greyGainsboro, + Color greyWhisper, + Color whiteSmoke, + Color whiteSnow, + Color white, + Color blueAlice, + }) { + return type == ColorThemeType.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, + ) + : 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, + ); + } +} + /// Channel theme data class ChannelTheme { /// Theme of the [ChannelHeader] widget diff --git a/lib/src/url_attachment.dart b/lib/src/url_attachment.dart index 5ecaa1cc..c655880d 100644 --- a/lib/src/url_attachment.dart +++ b/lib/src/url_attachment.dart @@ -63,7 +63,7 @@ class UrlAttachment extends StatelessWidget { borderRadius: BorderRadius.only( topRight: Radius.circular(16.0), ), - color: Color(0xFFE9F2FF), + color: StreamChatTheme.of(context).colorTheme.blueAlice, ), ), ),