Question 74988 in Flutter Question posted in
The official Flutter documentation can be found here.

Change icon color when Flutter switches to dark mode

How can we change icon colors when switching to dark mode in Flutter?

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.indigo,
        iconTheme: const IconThemeData(color: Colors.black),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.indigo,
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      themeMode: ThemeMode.system,
      home: const ExampleDeleteScreen(),
    );
  }
}

I applied these changes but the icon color does not change when I switch to dark mode. I would appreciate your help.

Tags:

2

Answers


  1. 0

    You need to define the color of the Icon to follow the ThemeData like this:

    Icon(
   color: Theme.of(context).primaryColor,
);
    Login or Signup to reply.
  2. 0

    Please try this code

    Icon(
          Icons.ac_unit,
          size: 50,
          color: Theme.of(context).iconTheme.color,
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search