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

Issue

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

The ListTile object using ListTileTheme for it’s default display, you need to set ListTileTheme for your main ThemeData like this:

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

Or you can also use ListTileTheme directly wherever you need by setting your widget to it’s child parameter, you can wrap your Drawer with a ListTileTheme:

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

Answered By – Mahmoud_Mehri

Answer Checked By – Cary Denson (FlutterFixes Admin)