Change the App Bar Text, Colors of Chat reaction Icons in stream chat v1

[ghost]

@imtoori I was trying to make changes to stream chat v1 as a reference, and I am unable to change the Following even despite referring to the documentation:

1. Change the title of the App Bar from 'Stream Chat ' to "My app" & edit the PenWrite Icon Properties like color for the Channel List
2. Change the colour/ overall theme for the (attach, GIF, send icons) icons & Message reaction icons from accentBlue to some other color in the texting screen
3. Change the color for Message read ticks in the texting screen

Refer Images for required changes

I wasn't able to apply changes for Point 2. even despite modifying the StreamChatTheme constructor in main.dart, Stream chat v1 as follows:

builder: (context, child) => StreamChatTheme(
                data: StreamChatThemeData(
                  channelListHeaderTheme: ChannelListHeaderTheme(
                    color: appPurpleColor,
                  ),
                  colorTheme: ColorTheme.dark(
                    accentBlue: appPurpleColor,
                  ),
                  channelTheme: ChannelTheme(
                    channelHeaderTheme: ChannelHeaderTheme(
                      color: appPurpleColor,
                      title: TextStyle(
                        color: appAccentIconColor,
                      ),
                    ),
                  ),
                  messageInputTheme: MessageInputTheme(
                    actionButtonColor: appAccentColor,
                    actionButtonIdleColor: appLightColor,
                    sendButtonColor: appAccentColor,
                    sendButtonIdleColor: appLightColor,
                  ),
                  primaryIconTheme: IconThemeData(color: appAccentColor),
                  brightness: Theme.of(context).brightness,
                ),

What am I doing wrong here, Kindly suggest the right way to make these changes.
Thanks :)

Full Build Method in main.dart for reference:

Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        if (_initData != null)
          PreferenceBuilder<int>(
            preference: _initData!.preferences.getInt(
              'theme',
              defaultValue: 0,
            ),
            builder: (context, snapshot) => MaterialApp(
              // Initialising the theme of the application
              theme: ThemeData.light(),
              darkTheme: ThemeData.dark(),
              themeMode: {
                -1: ThemeMode.dark,
                0: ThemeMode.system,
                1: ThemeMode.light,
              }[snapshot],
              builder: (context, child) => StreamChatTheme(
                data: StreamChatThemeData(
                  channelListHeaderTheme: ChannelListHeaderTheme(
                    color: appPurpleColor,
                  ),
                  colorTheme: ColorTheme.dark(
                    accentBlue: appPurpleColor,
                  ),
                  channelTheme: ChannelTheme(
                    channelHeaderTheme: ChannelHeaderTheme(
                      color: appPurpleColor,
                      title: TextStyle(
                        color: appAccentIconColor,
                      ),
                    ),
                  ),
                  messageInputTheme: MessageInputTheme(
                    actionButtonColor: appAccentColor,
                    actionButtonIdleColor: appLightColor,
                    sendButtonColor: appAccentColor,
                    sendButtonIdleColor: appLightColor,
                  ),
                  primaryIconTheme: IconThemeData(color: appAccentColor),
                  brightness: Theme.of(context).brightness,
                ),
                child: child!,
              ),
              onGenerateRoute: AppRoutes.generateRoute,
              onGenerateInitialRoutes: (initialRouteName) {
                if (initialRouteName == Routes.HOME) {
                  return [
                    AppRoutes.generateRoute(
                      RouteSettings(
                        name: Routes.HOME,
                        arguments: HomePageArgs(_initData!.client),
                      ),
                    )!
                  ];
                }
                return [
                  AppRoutes.generateRoute(
                    RouteSettings(
                      name: Routes.CHOOSE_USER,
                    ),
                  )!
                ];
              },
              initialRoute: _initData!.client.state.user == null
                  //Choose the launch screen on basis of the state of user login
                  ? Routes.CHOOSE_USER //TODO: Add sign in here
                  : Routes.HOME,
            ),
          ),
        if (!animationCompleted) buildAnimation(),
      ],
    );
  }
}

[imtoori]

Hi!
The sample app is built in a way that makes it easier to change user and use custom credentials as well
You can see that in home_page.dart we use a StreamChat widget and a Navigator in order to have the StreamChat widget (inherited widget that provides the client in all the other widgets) above the navigator

You can try passing the StreamChatThemeData object to that StreamChat widget instead of the one you have in main.dart
I think it should work fine

[ghost]

@imtoori Thanks.

what should I pass in colorTheme of StreamChatThemeData in home_page.dart?

        colorTheme: ColorTheme.dark(
          accentBlue: appPurpleColor,
        ),

passing ColorTheme.dark() or ColorTheme.light() breaks the theme of the rest of the application when you switch the theme using the icon and the overrides the other theme.

[ghost]

Also, How do I edit the "StreamChat" text in the channel list header to a custom text string?

[ghost]

Also, How do I edit the "StreamChat" text in the channel list header to a custom text string?

@imtoori Is there any way to do this?

[imtoori]

Also, How do I edit the "StreamChat" text in the channel list header to a custom text string?

for this, there is a property named titleBuilder that you can use to customize the title of the header

---

regarding the colorTheme, can you try using Theme.of(context).brightness to set the brightness? that should work fine