feat: Added color themes

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(

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',

lib/src/channel_list_view.dart

@@ -203,7 +203,9 @@ class _ChannelListViewState extends State<ChannelListView>
                               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<ChannelListView>
                                     .textTheme
                                     .body
                                     .copyWith(
-                                      color: Color(0xff7A7A7A),
+                                      color: StreamChatTheme.of(context)
+                                          .colorTheme
+                                          .grey,
                                     ),
                               ),
                             ),
@@ -311,7 +315,7 @@ class _ChannelListViewState extends State<ChannelListView>
   Shimmer _buildLoadingItem() {
     return Shimmer.fromColors(
       baseColor: Color(0xffE5E5E5),
-      highlightColor: Color(0xffffffff),
+      highlightColor: StreamChatTheme.of(context).colorTheme.white,
       child: ListTile(
         leading: Container(
           decoration: BoxDecoration(

lib/src/message_input.dart

@@ -724,7 +724,7 @@ class MessageInputState extends State<MessageInput> {
       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<MessageInput> {
                         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<MessageInput> {
                     },
                     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<MessageInput> {
                   PhotoManager.openSetting();
                 },
                 child: Container(
-                  color: Color(0xFFF2F2F2),
+                  color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     crossAxisAlignment: CrossAxisAlignment.stretch,

lib/src/message_list_view.dart

@@ -342,7 +342,9 @@ class _MessageListViewState extends State<MessageListView> {
                                     end: Alignment.bottomCenter,
                                     colors: [
                                       Color(0XFFF7F7F7),
-                                      Color(0XFFFCFCFC),
+                                      StreamChatTheme.of(context)
+                                          .colorTheme
+                                          .whiteSmoke,
                                     ],
                                   ),
                                 ),

lib/src/message_widget.dart

@@ -502,6 +502,7 @@ class _MessageWidgetState extends State<MessageWidget> {
               child: CustomPaint(
                 size: const Size(16, 32),
                 painter: _ThreadReplyPainter(
+                  context: context,
                   color: widget.messageTheme.replyThreadColor,
                 ),
               ),
@@ -916,7 +917,7 @@ class _MessageWidgetState extends State<MessageWidget> {
     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<MessageWidget> {
 
 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;

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

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,
                       ),
                     ),
                   ),