Merge branch 'feature/new-ui' of github.com:GetStream/stream-chat-flutter into feat/messg-reply

 Conflicts:

	example/ios/Flutter/.last_build_id

	example/lib/main.dart

	lib/src/file_attachment.dart

	lib/src/message_actions_modal.dart

	lib/src/message_input.dart

	lib/src/message_widget.dart

example/ios/Flutter/.last_build_id

@@ -1 +1 @@
-c3e639ccf9b069e37a7d1345194e6b99
+c770358a10272b4ee1cdc2eb432445f6

example/lib/advanced_options_page.dart

@@ -3,12 +3,12 @@ import 'dart:io';
 import 'package:example/stream_version.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import 'choose_user_page.dart';
 import 'main.dart';
 import 'notifications_service.dart';
-import 'choose_user_page.dart';
-import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 
 class AdvancedOptionsPage extends StatefulWidget {
   @override
@@ -34,20 +34,23 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       resizeToAvoidBottomPadding: false,
       appBar: AppBar(
-        backgroundColor: StreamChatTheme.of(context).primaryColor,
+        backgroundColor: StreamChatTheme.of(context).colorTheme.white,
         elevation: 1,
         centerTitle: true,
+        brightness: Theme.of(context).brightness,
         title: Text(
           'Advanced Options',
-          style: Theme.of(context).textTheme.subtitle1.copyWith(
-                fontWeight: FontWeight.bold,
-              ),
+          style: StreamChatTheme.of(context)
+              .textTheme
+              .headlineBold
+              .copyWith(color: StreamChatTheme.of(context).colorTheme.black),
         ),
         leading: IconButton(
           icon: StreamSvgIcon.left(
-            color: Colors.black,
+            color: StreamChatTheme.of(context).colorTheme.black,
           ),
           onPressed: () {
             Navigator.pop(context);
@@ -87,7 +90,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                     },
                     style: TextStyle(
                       fontSize: 14,
-                      color: Colors.black,
+                      color: StreamChatTheme.of(context).colorTheme.black,
                     ),
                     decoration: InputDecoration(
                       errorStyle: TextStyle(fontSize: 0),
@@ -95,14 +98,18 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                         fontSize: 14,
                         fontWeight: FontWeight.bold,
                         color: _apiKeyError != null
-                            ? Color(0xffff3742)
-                            : Colors.black.withOpacity(.5),
+                            ? StreamChatTheme.of(context).colorTheme.accentRed
+                            : StreamChatTheme.of(context)
+                                .colorTheme
+                                .black
+                                .withOpacity(.5),
                       ),
                       border: UnderlineInputBorder(
                         borderRadius: BorderRadius.circular(8),
                         borderSide: BorderSide.none,
                       ),
-                      fillColor: Color(0xffF5F5F5),
+                      fillColor:
+                          StreamChatTheme.of(context).colorTheme.whiteSmoke,
                       filled: true,
                       labelText:
                           'Chat API Key ${_apiKeyError != null ? ':$_apiKeyError' : ''}',
@@ -131,7 +138,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                       },
                       style: TextStyle(
                         fontSize: 14,
-                        color: Colors.black,
+                        color: StreamChatTheme.of(context).colorTheme.black,
                       ),
                       textInputAction: TextInputAction.next,
                       decoration: InputDecoration(
@@ -140,14 +147,18 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                           fontWeight: FontWeight.bold,
                           fontSize: 14,
                           color: _userIdError != null
-                              ? Color(0xffff3742)
-                              : Colors.black.withOpacity(.5),
+                              ? StreamChatTheme.of(context).colorTheme.accentRed
+                              : StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(.5),
                         ),
                         border: UnderlineInputBorder(
                           borderRadius: BorderRadius.circular(8),
                           borderSide: BorderSide.none,
                         ),
-                        fillColor: Color(0xffF5F5F5),
+                        fillColor:
+                            StreamChatTheme.of(context).colorTheme.whiteSmoke,
                         filled: true,
                         labelText:
                             'User ID ${_userIdError != null ? ':$_userIdError' : ''}',
@@ -176,7 +187,7 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                       },
                       style: TextStyle(
                         fontSize: 14,
-                        color: Colors.black,
+                        color: StreamChatTheme.of(context).colorTheme.black,
                       ),
                       textInputAction: TextInputAction.next,
                       decoration: InputDecoration(
@@ -185,14 +196,18 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                           fontWeight: FontWeight.bold,
                           fontSize: 14,
                           color: _userTokenError != null
-                              ? Color(0xffff3742)
-                              : Colors.black.withOpacity(.5),
+                              ? StreamChatTheme.of(context).colorTheme.accentRed
+                              : StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(.5),
                         ),
                         border: UnderlineInputBorder(
                           borderRadius: BorderRadius.circular(8),
                           borderSide: BorderSide.none,
                         ),
-                        fillColor: Color(0xffF5F5F5),
+                        fillColor:
+                            StreamChatTheme.of(context).colorTheme.whiteSmoke,
                         filled: true,
                         labelText:
                             'User Token ${_userTokenError != null ? ':$_userTokenError' : ''}',
@@ -208,13 +223,17 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                         labelStyle: TextStyle(
                           fontSize: 14,
                           fontWeight: FontWeight.bold,
-                          color: Colors.black.withOpacity(.5),
+                          color: StreamChatTheme.of(context)
+                              .colorTheme
+                              .black
+                              .withOpacity(.5),
                         ),
                         border: UnderlineInputBorder(
                           borderRadius: BorderRadius.circular(8),
                           borderSide: BorderSide.none,
                         ),
-                        fillColor: Color(0xffF5F5F5),
+                        fillColor:
+                            StreamChatTheme.of(context).colorTheme.whiteSmoke,
                         filled: true,
                         labelText: 'Username (optional)',
                       ),
@@ -224,13 +243,14 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                     child: Align(
                       alignment: Alignment.bottomCenter,
                       child: FlatButton(
-                        color: StreamChatTheme.of(context).accentColor,
+                        color:
+                            StreamChatTheme.of(context).colorTheme.accentBlue,
                         minWidth: double.infinity,
                         height: 48,
                         child: Text(
                           'Login',
                           style: TextStyle(
-                            color: Colors.white,
+                            color: StreamChatTheme.of(context).colorTheme.white,
                             fontSize: 16,
                           ),
                         ),
@@ -255,7 +275,9 @@ class _AdvancedOptionsPageState extends State<AdvancedOptionsPage> {
                                 child: Container(
                                   decoration: BoxDecoration(
                                     borderRadius: BorderRadius.circular(16),
-                                    color: Colors.white,
+                                    color: StreamChatTheme.of(context)
+                                        .colorTheme
+                                        .white,
                                   ),
                                   height: 100,
                                   width: 100,

example/lib/chips_input_text_field.dart

@@ -66,7 +66,7 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
       onTap: _pauseItemAddition ? resumeItemAddition : null,
       child: Material(
         elevation: 1,
-        color: Colors.white,
+        color: StreamChatTheme.of(context).colorTheme.white,
         child: Container(
           child: Padding(
             padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
@@ -78,10 +78,14 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                     padding: const EdgeInsets.symmetric(vertical: 4.0),
                     child: Text(
                       'TO:',
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: Colors.black.withOpacity(0.5),
-                      ),
+                      style: StreamChatTheme.of(context)
+                          .textTheme
+                          .footnote
+                          .copyWith(
+                              color: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(.5)),
                     ),
                   ),
                   SizedBox(width: 12),
@@ -111,10 +115,14 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                               disabledBorder: InputBorder.none,
                               contentPadding: const EdgeInsets.only(top: 4.0),
                               hintText: widget.hint,
-                              hintStyle: TextStyle(
-                                color: Colors.black.withOpacity(0.5),
-                                fontSize: 14,
-                              ),
+                              hintStyle: StreamChatTheme.of(context)
+                                  .textTheme
+                                  .body
+                                  .copyWith(
+                                      color: StreamChatTheme.of(context)
+                                          .colorTheme
+                                          .black
+                                          .withOpacity(.5)),
                             ),
                           ),
                       ],
@@ -126,11 +134,17 @@ class ChipInputTextFieldState<T> extends State<ChipsInputTextField<T>> {
                     child: IconButton(
                       icon: _chips.isEmpty
                           ? StreamSvgIcon.user(
-                              color: Colors.black.withOpacity(0.5),
+                              color: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(0.5),
                               size: 24,
                             )
                           : StreamSvgIcon.userAdd(
-                              color: Colors.black.withOpacity(0.5),
+                              color: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(0.5),
                               size: 24,
                             ),
                       onPressed: resumeItemAddition,

example/lib/choose_user_page.dart

@@ -1,5 +1,3 @@
-import 'package:example/advanced_options_page.dart';
-import 'package:example/main.dart';
 import 'package:example/stream_version.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -60,6 +58,7 @@ class ChooseUserPage extends StatelessWidget {
         (_, value) => value..extraData['image'] = getRandomPicUrl(value));
 
     return Scaffold(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       body: SafeArea(
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
@@ -80,19 +79,12 @@ class ChooseUserPage extends StatelessWidget {
               padding: const EdgeInsets.only(bottom: 13.0),
               child: Text(
                 'Welcome to Stream Chat',
-                style: TextStyle(
-                  fontSize: 22,
-                  color: Colors.black,
-                  fontWeight: FontWeight.bold,
-                ),
+                style: StreamChatTheme.of(context).textTheme.title,
               ),
             ),
             Text(
               'Select a user to try the Flutter SDK:',
-              style: TextStyle(
-                fontSize: 14.5,
-                color: Colors.black,
-              ),
+              style: StreamChatTheme.of(context).textTheme.body,
             ),
             Expanded(
               child: Padding(
@@ -120,7 +112,9 @@ class ChooseUserPage extends StatelessWidget {
                                 child: Container(
                                   decoration: BoxDecoration(
                                     borderRadius: BorderRadius.circular(16),
-                                    color: Colors.white,
+                                    color: StreamChatTheme.of(context)
+                                        .colorTheme
+                                        .white,
                                   ),
                                   height: 100,
                                   width: 100,
@@ -169,9 +163,20 @@ class ChooseUserPage extends StatelessWidget {
                           ),
                           title: Text(
                             user.name,
-                            style: TextStyle(fontWeight: FontWeight.bold),
+                            style:
+                                StreamChatTheme.of(context).textTheme.bodyBold,
+                          ),
+                          subtitle: Text(
+                            'Stream test account',
+                            style: StreamChatTheme.of(context)
+                                .textTheme
+                                .footnote
+                                .copyWith(
+                                  color: StreamChatTheme.of(context)
+                                      .colorTheme
+                                      .grey,
+                                ),
                           ),
-                          subtitle: Text('Stream test account'),
                           trailing: SvgPicture.asset(
                             'assets/icon_arrow_right.svg',
                             height: 24,
@@ -185,16 +190,26 @@ class ChooseUserPage extends StatelessWidget {
                         },
                         leading: CircleAvatar(
                           child: StreamSvgIcon.settings(
-                            color: Colors.black,
+                            color: StreamChatTheme.of(context).colorTheme.black,
                           ),
-                          backgroundColor:
-                              StreamChatTheme.of(context).secondaryColor,
+                          backgroundColor: StreamChatTheme.of(context)
+                              .colorTheme
+                              .greyWhisper,
                         ),
                         title: Text(
                           'Advanced Options',
-                          style: TextStyle(fontWeight: FontWeight.bold),
+                          style: StreamChatTheme.of(context).textTheme.bodyBold,
+                        ),
+                        subtitle: Text(
+                          'Custom settings',
+                          style: StreamChatTheme.of(context)
+                              .textTheme
+                              .footnote
+                              .copyWith(
+                                color:
+                                    StreamChatTheme.of(context).colorTheme.grey,
+                              ),
                         ),
-                        subtitle: Text('Custom settings'),
                         trailing: SvgPicture.asset(
                           'assets/icon_arrow_right.svg',
                           height: 24,

example/lib/custom_theme.dart

@@ -50,9 +50,10 @@ class MyApp extends StatelessWidget {
         client: client,
         streamChatThemeData: StreamChatThemeData.fromTheme(theme).copyWith(
           ownMessageTheme: MessageTheme(
-            messageBackgroundColor: Colors.black,
+            messageBackgroundColor:
+                StreamChatTheme.of(context).colorTheme.black,
             messageText: TextStyle(
-              color: Colors.white,
+              color: StreamChatTheme.of(context).colorTheme.white,
             ),
             avatarTheme: AvatarTheme(
               borderRadius: BorderRadius.circular(8),

example/lib/customize_channel_preview.dart

@@ -84,10 +84,12 @@ class ChannelListPage extends StatelessWidget {
         channel: channel,
       ),
       title: ChannelName(
-        channel: channel,
         textStyle:
             StreamChatTheme.of(context).channelPreviewTheme.title.copyWith(
-                  color: Colors.black.withOpacity(opacity),
+                  color: StreamChatTheme.of(context)
+                      .colorTheme
+                      .black
+                      .withOpacity(opacity),
                 ),
       ),
       subtitle: Text(subtitle),

example/lib/customize_message_widget.dart

@@ -127,7 +127,6 @@ class ChannelPage extends StatelessWidget {
       showTimestamp: !details.isNextUser,
       showUsername: !details.isNextUser,
       showReactions: false,
-      showReplyIndicator: false,
     );
   }
 }

example/lib/group_chat_details_screen.dart

@@ -59,15 +59,16 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
         return false;
       },
       child: Scaffold(
-        backgroundColor: Color.fromRGBO(252, 252, 252, 1),
+        backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
         appBar: AppBar(
+          brightness: Theme.of(context).brightness,
           elevation: 1,
-          backgroundColor: Colors.white,
+          backgroundColor: StreamChatTheme.of(context).colorTheme.white,
           leading: const StreamBackButton(),
           title: Text(
             'Name of Group Chat',
             style: TextStyle(
-              color: Colors.black,
+              color: StreamChatTheme.of(context).colorTheme.black,
               fontSize: 16,
             ),
           ),
@@ -82,7 +83,10 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                     'NAME',
                     style: TextStyle(
                       fontSize: 12,
-                      color: Colors.black.withOpacity(0.5),
+                      color: StreamChatTheme.of(context)
+                          .colorTheme
+                          .black
+                          .withOpacity(0.5),
                     ),
                   ),
                   SizedBox(width: 16),
@@ -99,7 +103,11 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                         contentPadding: const EdgeInsets.all(0),
                         hintText: 'Choose a group chat name',
                         hintStyle: TextStyle(
-                            fontSize: 14, color: Colors.black.withOpacity(.5)),
+                            fontSize: 14,
+                            color: StreamChatTheme.of(context)
+                                .colorTheme
+                                .black
+                                .withOpacity(.5)),
                       ),
                     ),
                   ),
@@ -113,7 +121,9 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                 padding: const EdgeInsets.all(0),
                 icon: StreamSvgIcon.check(
                   size: 24,
-                  color: _isGroupNameEmpty ? Colors.grey : Color(0xFF006CFF),
+                  color: _isGroupNameEmpty
+                      ? Colors.grey
+                      : StreamChatTheme.of(context).colorTheme.accentBlue,
                 ),
                 onPressed: _isGroupNameEmpty
                     ? null
@@ -144,7 +154,16 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
           children: [
             Container(
               width: double.maxFinite,
-              color: Colors.grey.shade50,
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    StreamChatTheme.of(context).colorTheme.whiteSmoke,
+                    StreamChatTheme.of(context).colorTheme.whiteSnow,
+                  ],
+                ),
+              ),
               child: Padding(
                 padding: const EdgeInsets.symmetric(
                   vertical: 8,
@@ -167,16 +186,28 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                   separatorBuilder: (_, __) => Container(
                     height: 1,
                     color: Theme.of(context).brightness == Brightness.dark
-                        ? Colors.white.withOpacity(0.1)
-                        : Colors.black.withOpacity(0.1),
+                        ? StreamChatTheme.of(context)
+                            .colorTheme
+                            .white
+                            .withOpacity(0.1)
+                        : StreamChatTheme.of(context)
+                            .colorTheme
+                            .black
+                            .withOpacity(0.1),
                   ),
                   itemBuilder: (_, index) {
                     if (index == _selectedUsers.length) {
                       return Container(
                         height: 1,
                         color: Theme.of(context).brightness == Brightness.dark
-                            ? Colors.white.withOpacity(0.1)
-                            : Colors.black.withOpacity(0.1),
+                            ? StreamChatTheme.of(context)
+                                .colorTheme
+                                .white
+                                .withOpacity(0.1)
+                            : StreamChatTheme.of(context)
+                                .colorTheme
+                                .black
+                                .withOpacity(0.1),
                       );
                     }
                     final user = _selectedUsers[index];
@@ -200,7 +231,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                       trailing: IconButton(
                         icon: Icon(
                           Icons.clear_rounded,
-                          color: Colors.black,
+                          color: StreamChatTheme.of(context).colorTheme.black,
                         ),
                         padding: const EdgeInsets.all(0),
                         splashRadius: 24,

example/lib/main.dart

@@ -1,8 +1,7 @@
+import 'dart:async';
 import 'dart:io';
 
 import 'package:example/choose_user_page.dart';
-import 'package:example/new_chat_screen.dart';
-import 'package:example/new_group_chat_screen.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -13,7 +12,6 @@ import 'notifications_service.dart';
 import 'routes/app_routes.dart';
 import 'routes/routes.dart';
 import 'search_text_field.dart';
-import 'dart:async';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -28,7 +26,7 @@ void main() async {
     logLevel: Level.INFO,
     showLocalNotification:
         (!kIsWeb && Platform.isAndroid) ? showLocalNotification : null,
-    persistenceEnabled: true,
+    persistenceEnabled: false,
   );
 
   if (userId != null) {
@@ -52,18 +50,20 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return StreamChat(
-      client: client,
-      child: MaterialApp(
-        debugShowCheckedModeBanner: false,
-        theme: ThemeData.light(),
-        darkTheme: ThemeData.dark(),
-        //TODO change to system once dark theme is implemented
-        themeMode: ThemeMode.light,
-        onGenerateRoute: AppRoutes.generateRoute,
-        initialRoute:
-            client.state.user == null ? Routes.CHOOSE_USER : Routes.HOME,
-      ),
+    return MaterialApp(
+      builder: (context, child) {
+        return StreamChat(
+          client: client,
+          child: child,
+        );
+      },
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData.light(),
+      darkTheme: ThemeData.dark(),
+      themeMode: ThemeMode.dark,
+      onGenerateRoute: AppRoutes.generateRoute,
+      initialRoute:
+          client.state.user == null ? Routes.CHOOSE_USER : Routes.HOME,
     );
   }
 }
@@ -85,7 +85,9 @@ class _HomePageState extends State<HomePage> {
           overflow: Overflow.visible,
           children: [
             StreamSvgIcon.message(
-              color: _isSelected(0) ? Colors.black : Colors.grey,
+              color: _isSelected(0)
+                  ? StreamChatTheme.of(context).colorTheme.black
+                  : Colors.grey,
             ),
             Positioned(
               top: -3,
@@ -101,7 +103,9 @@ class _HomePageState extends State<HomePage> {
           overflow: Overflow.visible,
           children: [
             StreamSvgIcon.mentions(
-              color: _isSelected(1) ? Colors.black : Colors.grey,
+              color: _isSelected(1)
+                  ? StreamChatTheme.of(context).colorTheme.black
+                  : Colors.grey,
             ),
           ],
         ),
@@ -114,6 +118,7 @@ class _HomePageState extends State<HomePage> {
   Widget build(BuildContext context) {
     final user = StreamChat.of(context).user;
     return Scaffold(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       appBar: ChannelListHeader(
         onNewChatButtonTap: () {
           Navigator.pushNamed(context, Routes.NEW_CHAT);
@@ -122,10 +127,14 @@ class _HomePageState extends State<HomePage> {
       drawer: _buildDrawer(context, user),
       drawerEdgeDragWidth: 50,
       bottomNavigationBar: BottomNavigationBar(
+        backgroundColor: StreamChatTheme.of(context).colorTheme.white,
         currentIndex: _currentIndex,
         items: _navBarItems,
+        selectedLabelStyle: StreamChatTheme.of(context).textTheme.footnoteBold,
+        unselectedLabelStyle:
+            StreamChatTheme.of(context).textTheme.footnoteBold,
         type: BottomNavigationBarType.fixed,
-        selectedItemColor: Colors.black,
+        selectedItemColor: StreamChatTheme.of(context).colorTheme.black,
         unselectedItemColor: Colors.grey,
         onTap: (index) {
           setState(() => _currentIndex = index);
@@ -143,104 +152,116 @@ class _HomePageState extends State<HomePage> {
 
   Drawer _buildDrawer(BuildContext context, User user) {
     return Drawer(
-      child: SafeArea(
-        child: Padding(
-          padding: EdgeInsets.only(
-            top: MediaQuery.of(context).viewPadding.top + 8,
-          ),
-          child: Column(
-            children: [
-              Padding(
-                padding: const EdgeInsets.only(
-                  bottom: 20.0,
-                  left: 8,
+      child: Container(
+        color: StreamChatTheme.of(context).colorTheme.white,
+        child: SafeArea(
+          child: Padding(
+            padding: EdgeInsets.only(
+              top: MediaQuery.of(context).viewPadding.top + 8,
+            ),
+            child: Column(
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(
+                    bottom: 20.0,
+                    left: 8,
+                  ),
+                  child: Row(
+                    children: [
+                      UserAvatar(
+                        user: user,
+                        showOnlineStatus: false,
+                        constraints: BoxConstraints.tight(Size.fromRadius(20)),
+                      ),
+                      Padding(
+                        padding: const EdgeInsets.only(left: 16.0),
+                        child: Text(
+                          user.name,
+                          style: TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
-                child: Row(
-                  children: [
-                    UserAvatar(
-                      user: user,
-                      showOnlineStatus: false,
-                      constraints: BoxConstraints.tight(Size.fromRadius(20)),
+                ListTile(
+                  leading: StreamSvgIcon.penWrite(
+                    color: StreamChatTheme.of(context)
+                        .colorTheme
+                        .black
+                        .withOpacity(.5),
+                  ),
+                  onTap: () {
+                    Navigator.popAndPushNamed(
+                      context,
+                      Routes.NEW_CHAT,
+                    );
+                  },
+                  title: Text(
+                    'New direct message',
+                    style: TextStyle(
+                      fontSize: 14.5,
                     ),
-                    Padding(
-                      padding: const EdgeInsets.only(left: 16.0),
-                      child: Text(
-                        user.name,
+                  ),
+                ),
+                ListTile(
+                  leading: StreamSvgIcon.contacts(
+                    color: StreamChatTheme.of(context)
+                        .colorTheme
+                        .black
+                        .withOpacity(.5),
+                  ),
+                  onTap: () {
+                    Navigator.popAndPushNamed(
+                      context,
+                      Routes.NEW_GROUP_CHAT,
+                    );
+                  },
+                  title: Text(
+                    'New group',
+                    style: TextStyle(
+                      fontSize: 14.5,
+                    ),
+                  ),
+                ),
+                Expanded(
+                  child: Container(
+                    alignment: Alignment.bottomCenter,
+                    child: ListTile(
+                      onTap: () async {
+                        Navigator.pop(context);
+
+                        final secureStorage = FlutterSecureStorage();
+                        await secureStorage.deleteAll();
+
+                        StreamChat.of(context).client.disconnect(
+                              clearUser: true,
+                            );
+
+                        await Navigator.pushReplacementNamed(
+                          context,
+                          Routes.CHOOSE_USER,
+                        );
+                      },
+                      leading: StreamSvgIcon.user(
+                        color: StreamChatTheme.of(context)
+                            .colorTheme
+                            .black
+                            .withOpacity(.5),
+                      ),
+                      title: Text(
+                        'Sign out',
                         style: TextStyle(
-                          fontSize: 16,
-                          fontWeight: FontWeight.bold,
+                          fontSize: 14.5,
                         ),
                       ),
                     ),
-                  ],
-                ),
-              ),
-              ListTile(
-                leading: StreamSvgIcon.penWrite(
-                  color: Colors.black.withOpacity(.5),
-                ),
-                onTap: () {
-                  Navigator.popAndPushNamed(
-                    context,
-                    Routes.NEW_CHAT,
-                  );
-                },
-                title: Text(
-                  'New direct message',
-                  style: TextStyle(
-                    fontSize: 14.5,
                   ),
                 ),
-              ),
-              ListTile(
-                leading: StreamSvgIcon.contacts(
-                  color: Colors.black.withOpacity(.5),
-                ),
-                onTap: () {
-                  Navigator.popAndPushNamed(
-                    context,
-                    Routes.NEW_GROUP_CHAT,
-                  );
-                },
-                title: Text(
-                  'New group',
-                  style: TextStyle(
-                    fontSize: 14.5,
-                  ),
-                ),
-              ),
-              Expanded(
-                child: Container(
-                  alignment: Alignment.bottomCenter,
-                  child: ListTile(
-                    onTap: () async {
-                      Navigator.pop(context);
-
-                      final secureStorage = FlutterSecureStorage();
-                      await secureStorage.deleteAll();
-
-                      StreamChat.of(context).client.disconnect(
-                            clearUser: true,
-                          );
-
-                      await Navigator.pushReplacementNamed(
-                        context,
-                        Routes.CHOOSE_USER,
-                      );
-                    },
-                    leading: StreamSvgIcon.user(
-                      color: Colors.black.withOpacity(.5),
-                    ),
-                    title: Text(
-                      'Sign out',
-                      style: TextStyle(
-                        fontSize: 14.5,
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ),
@@ -436,7 +457,7 @@ class _ChannelPageState extends State<ChannelPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Color.fromRGBO(252, 252, 252, 1),
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       appBar: ChannelHeader(
         showTypingIndicator: false,
       ),
@@ -463,7 +484,10 @@ class _ChannelPageState extends State<ChannelPage> {
                   right: 0,
                   child: Container(
                     alignment: Alignment.centerLeft,
-                    color: Color(0xffFCFCFC).withOpacity(.9),
+                    color: StreamChatTheme.of(context)
+                        .colorTheme
+                        .whiteSnow
+                        .withOpacity(.9),
                     child: TypingIndicator(
                       alignment: Alignment.centerLeft,
                       padding: const EdgeInsets.symmetric(
@@ -501,7 +525,7 @@ class ThreadPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Color.fromRGBO(252, 252, 252, 1),
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       appBar: ThreadHeader(
         parent: parent,
       ),

example/lib/new_chat_screen.dart

@@ -5,7 +5,6 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'chips_input_text_field.dart';
 import 'main.dart';
-import 'new_group_chat_screen.dart';
 import 'routes/routes.dart';
 
 class NewChatScreen extends StatefulWidget {
@@ -37,8 +36,6 @@ class _NewChatScreenState extends State<NewChatScreen> {
 
   bool _showUserList = true;
 
-  bool _channelExisted = false;
-
   void _userNameListener() {
     if (_debounce?.isActive ?? false) _debounce.cancel();
     _debounce = Timer(const Duration(milliseconds: 350), () {
@@ -122,17 +119,18 @@ class _NewChatScreenState extends State<NewChatScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: Color.fromRGBO(252, 252, 252, 1),
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       appBar: AppBar(
+        brightness: Theme.of(context).brightness,
         elevation: 0,
-        backgroundColor: Colors.white,
+        backgroundColor: StreamChatTheme.of(context).colorTheme.white,
         leading: const StreamBackButton(),
         title: Text(
           'New Chat',
-          style: TextStyle(
-            color: Colors.black,
-            fontSize: 16,
-          ),
+          style: StreamChatTheme.of(context)
+              .textTheme
+              .headlineBold
+              .copyWith(color: StreamChatTheme.of(context).colorTheme.black),
         ),
         centerTitle: true,
       ),
@@ -157,7 +155,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
                     children: [
                       Container(
                         decoration: BoxDecoration(
-                          color: Colors.black.withOpacity(0.05),
+                          color: StreamChatTheme.of(context)
+                              .colorTheme
+                              .black
+                              .withOpacity(0.05),
                           borderRadius: BorderRadius.circular(12),
                         ),
                         padding: const EdgeInsets.only(left: 24),
@@ -165,7 +166,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
                           padding: const EdgeInsets.fromLTRB(8, 4, 12, 4),
                           child: Text(
                             user.name,
-                            style: TextStyle(color: Colors.black),
+                            style: TextStyle(
+                                color: StreamChatTheme.of(context)
+                                    .colorTheme
+                                    .black),
                           ),
                         ),
                       ),
@@ -182,7 +186,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                       ),
                       Positioned(
                         child: StreamSvgIcon.close(
-                          color: Colors.white,
+                          color: StreamChatTheme.of(context).colorTheme.white,
                         ),
                       ),
                     ],
@@ -212,7 +216,9 @@ class _NewChatScreenState extends State<NewChatScreen> {
                         StreamNeumorphicButton(
                           child: Center(
                             child: StreamSvgIcon.contacts(
-                              color: Color(0xFF006CFF),
+                              color: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .accentBlue,
                               size: 24,
                             ),
                           ),
@@ -220,10 +226,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                         SizedBox(width: 8),
                         Text(
                           'Create a Group',
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontSize: 16,
-                          ),
+                          style: StreamChatTheme.of(context).textTheme.bodyBold,
                         ),
                       ],
                     ),
@@ -238,8 +241,14 @@ class _NewChatScreenState extends State<NewChatScreen> {
                     begin: Alignment.centerLeft,
                     end: Alignment.centerRight,
                     colors: [
-                      Colors.black.withOpacity(0.02),
-                      Colors.white.withOpacity(0.05),
+                      StreamChatTheme.of(context)
+                          .colorTheme
+                          .black
+                          .withOpacity(0.02),
+                      StreamChatTheme.of(context)
+                          .colorTheme
+                          .white
+                          .withOpacity(0.05),
                     ],
                     stops: [0, 1],
                   ),
@@ -250,13 +259,17 @@ class _NewChatScreenState extends State<NewChatScreen> {
                     horizontal: 8,
                   ),
                   child: Text(
-                    _isSearchActive
-                        ? "Matches for \"$_userNameQuery\""
-                        : 'On the platform',
-                    style: TextStyle(
-                      color: Colors.black.withOpacity(0.5),
-                    ),
-                  ),
+                      _isSearchActive
+                          ? "Matches for \"$_userNameQuery\""
+                          : 'On the platform',
+                      style: StreamChatTheme.of(context)
+                          .textTheme
+                          .footnote
+                          .copyWith(
+                              color: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(.5))),
                 ),
               ),
             Expanded(
@@ -316,7 +329,17 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                             ),
                                           ),
                                           Text(
-                                              'No user matches these keywords...'),
+                                            'No user matches these keywords...',
+                                            style: StreamChatTheme.of(context)
+                                                .textTheme
+                                                .footnote
+                                                .copyWith(
+                                                    color: StreamChatTheme.of(
+                                                            context)
+                                                        .colorTheme
+                                                        .black
+                                                        .withOpacity(.5)),
+                                          ),
                                         ],
                                       ),
                                     ),
@@ -340,7 +363,10 @@ class _NewChatScreenState extends State<NewChatScreen> {
                             'No chats here yet...',
                             style: TextStyle(
                               fontSize: 12,
-                              color: Colors.black.withOpacity(.5),
+                              color: StreamChatTheme.of(context)
+                                  .colorTheme
+                                  .black
+                                  .withOpacity(.5),
                             ),
                           ),
                         );

example/lib/new_group_chat_screen.dart

@@ -3,9 +3,8 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
-import 'group_chat_details_screen.dart';
-import 'search_text_field.dart';
 import 'routes/routes.dart';
+import 'search_text_field.dart';
 
 class NewGroupChatScreen extends StatefulWidget {
   @override
@@ -51,23 +50,24 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
 
   @override
   Widget build(BuildContext context) {
-    return SafeArea(
-      child: Scaffold(
-        backgroundColor: Color.fromRGBO(252, 252, 252, 1),
-        body: NestedScrollView(
+    return Scaffold(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
+      body: SafeArea(
+        child: NestedScrollView(
           floatHeaderSlivers: true,
           headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
             return <Widget>[
               SliverAppBar(
+                brightness: Theme.of(context).brightness,
                 pinned: true,
                 forceElevated: true,
                 elevation: 1,
-                backgroundColor: Colors.white,
+                backgroundColor: StreamChatTheme.of(context).colorTheme.white,
                 leading: const StreamBackButton(),
                 title: Text(
                   'Add Group Members',
                   style: TextStyle(
-                    color: Colors.black,
+                    color: StreamChatTheme.of(context).colorTheme.black,
                     fontSize: 16,
                   ),
                 ),
@@ -76,7 +76,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                   if (_selectedUsers.isNotEmpty)
                     IconButton(
                       icon: StreamSvgIcon.arrow_right(
-                        color: Color(0xFF006CFF),
+                        color:
+                            StreamChatTheme.of(context).colorTheme.accentBlue,
                       ),
                       onPressed: () async {
                         final updatedList = await Navigator.pushNamed(
@@ -137,18 +138,21 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                     },
                                     child: Container(
                                       decoration: BoxDecoration(
-                                        color: Colors.white,
+                                        color: StreamChatTheme.of(context)
+                                            .colorTheme
+                                            .white,
                                         shape: BoxShape.circle,
                                         border: Border.all(
-                                          color: Colors.grey.shade100,
+                                          color: StreamChatTheme.of(context)
+                                              .colorTheme
+                                              .whiteSnow,
                                         ),
                                       ),
-                                      child: Padding(
-                                        padding: const EdgeInsets.all(0.0),
-                                        child: StreamSvgIcon.close(
-                                          color: Colors.black,
-                                          size: 24,
-                                        ),
+                                      child: StreamSvgIcon.close(
+                                        color: StreamChatTheme.of(context)
+                                            .colorTheme
+                                            .black,
+                                        size: 24,
                                       ),
                                     ),
                                   ),
@@ -180,8 +184,14 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                         begin: Alignment.centerLeft,
                         end: Alignment.centerRight,
                         colors: [
-                          Colors.black.withOpacity(0.02),
-                          Colors.white.withOpacity(0.05),
+                          StreamChatTheme.of(context)
+                              .colorTheme
+                              .black
+                              .withOpacity(0.02),
+                          StreamChatTheme.of(context)
+                              .colorTheme
+                              .white
+                              .withOpacity(0.05),
                         ],
                         stops: [0, 1],
                       ),
@@ -196,7 +206,10 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                             ? 'Matches for \"$_userNameQuery\"'
                             : 'On the platform',
                         style: TextStyle(
-                          color: Colors.black.withOpacity(0.5),
+                          color: StreamChatTheme.of(context)
+                              .colorTheme
+                              .black
+                              .withOpacity(0.5),
                         ),
                       ),
                     ),
@@ -261,7 +274,17 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                     color: Colors.grey,
                                   ),
                                 ),
-                                Text('No user matches these keywords...'),
+                                Text(
+                                  'No user matches these keywords...',
+                                  style: StreamChatTheme.of(context)
+                                      .textTheme
+                                      .footnote
+                                      .copyWith(
+                                          color: StreamChatTheme.of(context)
+                                              .colorTheme
+                                              .black
+                                              .withOpacity(.5)),
+                                ),
                               ],
                             ),
                           ),
@@ -292,7 +315,7 @@ class _HeaderDelegate extends SliverPersistentHeaderDelegate {
   Widget build(
       BuildContext context, double shrinkOffset, bool overlapsContent) {
     return Container(
-      color: Colors.white,
+      color: StreamChatTheme.of(context).colorTheme.white,
       child: child,
     );
   }

example/lib/search_text_field.dart

@@ -22,9 +22,9 @@ class SearchTextField extends StatelessWidget {
     return Container(
       height: 36,
       decoration: BoxDecoration(
-        color: Colors.white,
+        color: StreamChatTheme.of(context).colorTheme.white,
         border: Border.all(
-          color: Colors.grey.shade300,
+          color: StreamChatTheme.of(context).colorTheme.greyWhisper,
         ),
         borderRadius: BorderRadius.circular(24),
       ),
@@ -40,6 +40,7 @@ class SearchTextField extends StatelessWidget {
               controller: controller,
               onChanged: onChanged,
               decoration: InputDecoration(
+                prefixText: '    ',
                 prefixIconConstraints: BoxConstraints.tight(Size(40, 24)),
                 prefixIcon: Padding(
                   padding: const EdgeInsets.only(
@@ -47,15 +48,16 @@ class SearchTextField extends StatelessWidget {
                     right: 8,
                   ),
                   child: StreamSvgIcon.search(
-                    color: Colors.black,
+                    color: StreamChatTheme.of(context).colorTheme.black,
                     size: 24,
                   ),
                 ),
                 hintText: hintText,
-                hintStyle: TextStyle(
-                  color: Colors.black.withOpacity(0.5),
-                  fontSize: 14,
-                ),
+                hintStyle: StreamChatTheme.of(context).textTheme.body.copyWith(
+                    color: StreamChatTheme.of(context)
+                        .colorTheme
+                        .black
+                        .withOpacity(.5)),
                 contentPadding: const EdgeInsets.all(0),
                 border: OutlineInputBorder(
                   borderSide: BorderSide.none,

example/lib/stream_version.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:yaml/yaml.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 class StreamVersion extends StatelessWidget {
   const StreamVersion({
@@ -28,7 +29,8 @@ class StreamVersion extends StatelessWidget {
             'Stream SDK v ${streamChatDep}',
             style: TextStyle(
               fontSize: 14.5,
-              color: Colors.black.withOpacity(.13),
+              color:
+                  StreamChatTheme.of(context).colorTheme.black.withOpacity(.13),
             ),
           );
         },

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.94+97
+version: 1.0.102+105
 
 environment:
   sdk: ">=2.2.2 <3.0.0"