Changing icon color in light theme doesn't have any affect

Question

I'm writing a flutter application and I'm trying to define my own themes for light and dark themes. coding with android studio and testing it using the regular android emulator that comes with it.

I noticed that when I change icon color in dark theme, it works and see the icons in the desired color, when the emulator is set to light theme, the colors of the icons do not change.

this is my dark theme code that does work:

import 'package:flutter/material.dart';

class DarkTheme {
  DarkTheme._();

  static const Color _iconColor = Colors.red;
  static const Color _darkPrimaryColor = Colors.black;
  static const Color _darkSecondaryColor = Colors.white;
  static const Color _darkOnPrimaryColor = Colors.white;

  static final ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: _darkPrimaryColor,
    appBarTheme: const AppBarTheme(
        color: _darkPrimaryColor,
        iconTheme: IconThemeData(
          color: _darkOnPrimaryColor,
        )
    ),
    colorScheme: const ColorScheme.dark(
      primary: _darkPrimaryColor,
      secondary: _darkSecondaryColor,
      onPrimary: _darkOnPrimaryColor,
    ),
    iconTheme: const IconThemeData(
      color: _iconColor,
    ),
    textTheme: _darkTextTheme,
  );
  static const TextTheme _darkTextTheme = TextTheme(
    headline1: _darkScreenHeadingTextStyle,
    bodyText1: _darkScreenTaskNameStyle,
    bodyText2: _darkScreenTaskDurationStyle,
  );
  static const TextStyle _darkScreenHeadingTextStyle = TextStyle(
    fontSize: 48.0,
    color: _darkOnPrimaryColor,
  );
  static const TextStyle _darkScreenTaskNameStyle = TextStyle(
    fontSize: 20.0,
    color: _darkOnPrimaryColor,
  );
  static const TextStyle _darkScreenTaskDurationStyle = TextStyle(
    fontSize: 16.0,
    color: _darkOnPrimaryColor,
  );
}

as you can see here i set the icon color to red, and when i run the app in dark mode the icons are in red color.

this is the code for the light theme:

import 'package:flutter/material.dart';

class PinkTheme {
  PinkTheme._();

  static const Color _iconColor = Colors.yellow;
  static const Color _lightPrimaryColor = Colors.pinkAccent;
  static const Color _lightPrimaryVariantColor = Colors.blue;
  static const Color _lightSecondaryColor = Colors.green;
  static const Color _lightOnPrimaryColor = Colors.black;

  static final ThemeData lightTheme = ThemeData(
    scaffoldBackgroundColor: _lightPrimaryVariantColor,
    appBarTheme: const AppBarTheme(
       color: _lightPrimaryVariantColor,
      iconTheme: IconThemeData(
        color: _lightOnPrimaryColor,
      )
    ),
      colorScheme: const ColorScheme.light(
          primary: _lightPrimaryColor,
          primaryVariant: _lightPrimaryVariantColor,
          secondary: _lightSecondaryColor,
          onPrimary: _lightOnPrimaryColor,
      ),
      iconTheme: const IconThemeData(
        color: _iconColor,
  ),
      textTheme: _lightTextTheme,
  );
static const TextTheme _lightTextTheme = TextTheme(
  headline1: _lightScreenHeadingTextStyle,
  bodyText1: _lightScreenTaskNameStyle,
  bodyText2: _lightScreenTaskDurationStyle,
);
  static const TextStyle _lightScreenHeadingTextStyle = TextStyle(
    fontSize: 48.0,
    color: _lightOnPrimaryColor,
  );
  static const TextStyle _lightScreenTaskNameStyle = TextStyle(
    fontSize: 20.0,
    color: _lightOnPrimaryColor,
  );
  static const TextStyle _lightScreenTaskDurationStyle = TextStyle(
    fontSize: 16.0,
    color: _lightOnPrimaryColor,
  );
}

and when i set the emulator to light theme, instead of seeing the icons in yellow, i see them in gray.

this is how i use the themes in my app:

return MaterialApp(
          title: 'Test App',
          theme: PinkTheme.lightTheme,
          darkTheme: DarkTheme.darkTheme,
          themeMode: ThemeMode.system,
          ...    

any ideas how to resolve it ?

thank you

Solution 1

The ListTile widget uses the ListTileTheme for it's default display, so you'll need to set it for your main ThemeData like this:

return MaterialApp(
  title: '...',
  theme: ThemeData(
    listTileTheme: const ListTileThemeData(
      iconColor: Colors.red,
    ),
    primarySwatch: ...,

Or you can also set its theme (ListTileTheme) directly wherever you need:

return ListTileTheme(
  iconColor: Colors.red,
  child: Drawer(
    child: Column(
      children: [
        ...

Solution 2

ThemeData(
        listTileTheme: ListTileThemeData(
          iconColor: Colors.red,
        ),

An inherited widget that defines color and style parameters for ListTiles in this widget's subtree.

Values specified here are used for ListTile properties that are not given an explicit non-null value.