# Theming

Understanding How To Customize Widgets Using `StreamChatTheme`

Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChatTheme-class.html) and [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChatThemeData-class.html)

### Background

Stream's UI SDK makes it easy for developers to add custom styles and attributes to our widgets. Like most Flutter frameworks, Stream exposes a dedicated widget for theming.

Using `StreamChatTheme`, users can customize most aspects of our UI widgets by setting attributes using `StreamChatThemeData`.

Similar to the `Theme` and `ThemeData` in Flutter, Stream Chat uses a top level [inherited widget](https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html) to provide theming information throughout your application. This can be optionally set at the top of your application tree or at a localized point in your widget sub-tree.

If you'd like to customize the look and feel of Stream chat across your entire application, we recommend setting your theme at the top level. Conversely, users can customize specific screens or widgets by wrapping components in a `StreamChatTheme`.

### A note on Material 3

Material 3 is a new design system from Google that Flutter versions >= 3.16.0 are using by default. Stream Chat SDK is using Material 2 by default. If you are using an older version of Flutter, you should be fine, but if you are using a newer version of Flutter, you should know that all components that are lower than `StreamChat` widget will only use Material 2.

If you are using Material 3 in your app, keep in mind that any widget under StreamChat will use Material 2 by default. You can change it by providing useMaterial3: true to StreamChat widget.

```dart
StreamChat(
  client: client,
  useMaterial3: true,
  child: child,
)
```

> [!WARNING]
> If you set `useMaterial3` to `true`, all components that are lower than `StreamChat` widget will use Material 3 which is **not supported** by our widgets yet.

### A closer look at StreamChatThemeData

Looking at the constructor for `StreamChatThemeData`, we can see the full list of properties and widgets available for customization.

Some high-level properties such as `textTheme` or `colorTheme` can be set application-wide directly from this class. In contrast, larger components such as `ChannelHeader`, `MessageInputs`, etc. have been broken up into smaller theme objects.

```dart
factory StreamChatThemeData({
    Brightness? brightness,
    TextTheme? textTheme,
    ColorTheme? colorTheme,
    StreamChannelListHeaderThemeData? channelListHeaderTheme,
    StreamChannelPreviewThemeData? channelPreviewTheme,
    StreamChannelHeaderThemeData? channelHeaderTheme,
    StreamMessageThemeData? otherMessageTheme,
    StreamMessageThemeData? ownMessageTheme,
    StreamMessageInputThemeData? messageInputTheme,
    Widget Function(BuildContext, User)? defaultUserImage,
    PlaceholderUserImage? placeholderUserImage,
    IconThemeData? primaryIconTheme,
    List<StreamReactionIcon>? reactionIcons,
    StreamGalleryHeaderThemeData? imageHeaderTheme,
    StreamGalleryFooterThemeData? imageFooterTheme,
    StreamMessageListViewThemeData? messageListViewTheme,
  });
```

### Stream Chat Theme in use

Let's take a look at customizing widgets using `StreamChatThemeData`. In the example below, we can change the default color theme to yellow and override the channel header's typography and colors.

```dart
MaterialApp(
  builder: (context, child) => StreamChat(
    client: client,
    streamChatThemeData: StreamChatThemeData(
      colorTheme: StreamColorTheme.light(
        accentPrimary: const Color(0xffffe072),
      ),
        channelHeaderTheme: const ChannelHeaderThemeData(
          color: const Color(0xffd34646),
          titleStyle: TextStyle(
            color: Colors.white,
          ),
        ),
    ),
    child: child,
  ),
);
```

We are creating this class at the very top of our widget tree using the `streamChatThemeData` parameter found in the `StreamChat` widget.

![](@chat-sdk/flutter/v9/_assets/using_theme.jpg)


---

This page was last updated at 2026-06-09T15:44:09.097Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/flutter/v7/stream-chat-flutter/stream-chat-and-theming/](https://getstream.io/chat/docs/sdk/flutter/v7/stream-chat-flutter/stream-chat-and-theming/).