v10: composer / attachment-picker icons render white (invisible) in light mode despite a light StreamColorScheme

[Mounix99]

Package

stream_chat_flutter

On what platforms did you experience the issue?

iOS

Package version

stream_chat_flutter 10.0.1, stream_core_flutter 0.3.0 (Flutter 3.44.0, Dart 3.12.0)

Flutter version

3.44.0

Steps to reproduce

1. Provide a custom light StreamColorScheme to the app — e.g. expose a StreamTheme(brightness: Brightness.light, colorScheme: StreamColorScheme.light(accentPrimary: <appAccent>)) as a ThemeData extension on the app's light theme (so StreamChat picks it up via StreamTheme.of(context)).
2. Run the app in light mode and open a channel (StreamChannel + StreamMessageComposer).
3. Look at the composer's icons: the leading attachment +, the attachment-picker tab icons (gallery/camera/files/…), and the send/record button.

Expected behavior

The composer/picker icons should use the provided light StreamColorScheme — i.e. textPrimary (a dark color) — and be visible on the light composer surface, exactly as the message-list text correctly does.

Actual behavior

The composer / attachment-picker icons render white (invisible) on the light surface, even though the message list text correctly uses the light scheme (dark text). In dark mode the same icons are white and visible (correct). So only the composer/picker StreamButton icons behave as if a dark scheme is active, while everything else uses the light scheme.

Diagnostic (measured at the composer's build context)

Theme.of(context).brightness                       = Brightness.light
Theme.of(context).extension<StreamTheme>() != null = true
StreamTheme.of(context).brightness                 = Brightness.light
context.streamColorScheme.textPrimary              = Color(0xFF1A1B25)   // dark

So the resolved StreamColorScheme at the composer is the light one, and textPrimary is dark.

Analysis

The composer icons are StreamButtons:

• leading + → StreamButton(style: secondary, type: outline) → _SecondaryOutlineDefaults.foregroundColor => colorScheme.textPrimary
• picker tabs / send → StreamButton(style: secondary, type: ghost/...) → _SecondaryGhostDefaults.foregroundColor => colorScheme.textPrimary

effectiveForegroundColor = themeStyle?.foregroundColor ?? defaults.foregroundColor, and with the default (empty) StreamButtonThemeData the defaults win → colorScheme.textPrimary. Since textPrimary is dark (per the diagnostic above) and it's passed as ButtonStyle.foregroundColor to the underlying ElevatedButton, the icons should render dark — but they render white. We could not find any theme re-injection between StreamMessageComposer and the buttons, nor a separate iconColor override, nor a MediaQuery.platformBrightness fallback in the resolution path.

Question

Is this a known issue, or is there a supported way to supply a custom light StreamColorScheme so the composer/picker StreamButton icons pick it up? Note that StreamColorScheme/StreamTheme are exported by stream_chat_flutter, but StreamButtonThemeData (which would let us force the button foreground) is not — so overriding the button theme requires depending on stream_core_flutter directly.

[xsahil03x]

Hey @Mounix99 , can you share a small sample code i can quickly test to reproduce it? Thanks

[Mounix99]

Hi @xsahil03x — thanks for looking! Here's a minimal single-file repro. The only trigger needed is supplying a custom light StreamColorScheme as a ThemeData extension, then opening a channel in light mode. Fill in your own API key / user id / token / channel id — the bug is in the button colour resolution, not the data.

// main.dart — minimal repro for #2786
import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';

late final StreamChatClient client;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  client = StreamChatClient('YOUR_API_KEY');
  await client.connectUser(User(id: 'YOUR_USER_ID'), 'YOUR_USER_TOKEN');
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // A custom *light* StreamColorScheme, exposed as a ThemeData extension so
    // StreamChat resolves it via StreamTheme.of(context). Its textPrimary is a
    // dark colour, so the composer/picker icons SHOULD render dark.
    final streamTheme = StreamTheme(
      brightness: Brightness.light,
      colorScheme: StreamColorScheme.light(),
    );

    return MaterialApp(
      themeMode: ThemeMode.light, // force light
      theme: ThemeData.light().copyWith(extensions: [streamTheme]),
      home: StreamChat(client: client, child: const HomeScreen()),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final channel = client.channel('messaging', id: 'YOUR_CHANNEL_ID');
    return StreamChannel(
      channel: channel,
      child: Scaffold(
        appBar: const StreamChannelHeader(),
        body: Column(
          children: const [
            Expanded(child: StreamMessageListView()),
            // 👇 Leading `+`, attachment-picker tab icons and the send/record
            //    button all render WHITE on the light composer surface.
            StreamMessageComposer(),
          ],
        ),
      ),
    );
  }
}

The message-list text correctly uses the light scheme (dark text), but the composer/picker StreamButton icons render white as if a dark scheme were active. Happy to provide more detail if it doesn't reproduce on your end.

[xsahil03x]

Hey @Mounix99 , i tried the sample code locally but couldn't reproduce the issue you mentioned. Can you check if you are not overriding the StreamButtonTheme anywhere in your widget tree? Or maybe you can share a repo which i can directly test.

[github-actions]

Hey, you can help us out by closing this issue if the problem no longer exists, or adding more information.

[Mounix99]

Found the root cause — it's an interaction with the host app's ElevatedButtonThemeData, which is why the plain repro didn't show it for you, @xsahil03x.

Repro trigger

Add a theme-level iconColor to the app theme in my earlier snippet (my app sets one for icons on filled buttons):

theme: ThemeData.light().copyWith(
  extensions: [streamTheme],
  elevatedButtonTheme: const ElevatedButtonThemeData(
    style: ButtonStyle(iconColor: WidgetStatePropertyAll(Colors.white)),
  ),
),

Every composer / attachment-picker / header icon now renders white in light mode.

Why

StreamButton renders an ElevatedButton and passes only foregroundColor (no iconColor) in its ButtonStyle. Flutter's ButtonStyleButton.effectiveIconColor resolves:

widget.iconColor ?? theme.iconColor ?? widget.foregroundColor ?? theme.foregroundColor ?? ...

so a host-app theme-level iconColor beats StreamButton's widget-level foregroundColor for icons (text is unaffected — hence "text themes correctly, icons don't"). Any app that sets ElevatedButtonThemeData with an iconColor (or builds it via ElevatedButton.styleFrom(foregroundColor: ...), which sets iconColor too) breaks every Stream icon button.

Suggested fix

In DefaultStreamButton.build (stream_core_flutter stream_button.dart), pass the already-resolved foreground as the icon color so host themes can't leak in:

style: ButtonStyle(
  ...
  foregroundColor: effectiveForegroundColor,
  iconColor: effectiveForegroundColor,
  ...
),

Workaround (app side)

Wrap chat surfaces in a Theme that strips iconColor from the inherited elevatedButtonTheme — confirmed working on 10.1.0.

Feel free to retitle to something like "StreamButton icons inherit the host app's ElevatedButtonThemeData.iconColor" — happy to open a PR for the one-liner if useful.