Dark mode change not working, predefined text is same color as background

Question

So basically I tried to add a dark mode feature to my app with provider, on the main page everything is fine, but when I change to dark mode my title changes to the same color as my background. Why is that? Changing it back to light mode shows the same outcome, the titleText is the same as the background.

    class ThemeProvider extends ChangeNotifier {
  bool isDarkMode = false;

  void toggleTheme() {
    isDarkMode = !isDarkMode;
    print('Theme toggled: isDarkMode = $isDarkMode');
    notifyListeners();
  }

  ThemeData get themeData => isDarkMode ? darkTheme : lightTheme;

}


ThemeData lightTheme = ThemeData(
  primaryColor: Colors.blue,
  scaffoldBackgroundColor: Colors.white,
  appBarTheme: const AppBarTheme(
    color: Colors.blue,
    elevation: 0,
  ) ,
  textTheme: TextTheme(
  titleLarge: const TextStyle(
    fontSize: 20,
    color: Colors.black, 
  ),
),
);


ThemeData darkTheme = ThemeData(
  primaryColor: Colors.teal,
  scaffoldBackgroundColor: Colors.black,
  appBarTheme: const AppBarTheme(
    color: Colors.teal,
    elevation: 0,
    iconTheme: IconThemeData(color: Colors.white),
  ),
  textTheme: TextTheme(
  titleLarge: const TextStyle(
    fontSize: 25,
    color: Colors.white, 
  ),
)
);

The main.dart file:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: const MainApp(),
    ),);
}

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

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return MaterialApp(
        theme: themeProvider.themeData,
        home: const IntroPage());
  }
}

And I use it like this:

Text(
                  introPages[index]["title"]!,
                  style: Theme.of(context).textTheme.titleLarge, 
                ),

Answer 1

I think it's theme is not properly rebuilding Please refer below code I hope it's useful

Code:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(ChangeNotifierProvider(
    create: (_) => ThemeProvider(),
    child: const MainApp(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, child) {
        return MaterialApp(
          theme: themeProvider.themeData,
          home: const IntroPage(),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              introPages[index]["title"]??"",
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
              },
              child: const Text('Toggle Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

class ThemeProvider extends ChangeNotifier {
  bool isDarkMode = false;

  void toggleTheme() {
    isDarkMode = !isDarkMode;
    notifyListeners();
  }

  ThemeData get themeData => isDarkMode ? darkTheme : lightTheme;
}

ThemeData lightTheme = ThemeData(
  primaryColor: Colors.blue,
  scaffoldBackgroundColor: Colors.white,
  appBarTheme: const AppBarTheme(
    color: Colors.blue,
    elevation: 0,
  ),
  textTheme: const TextTheme(
    titleLarge: TextStyle(
      fontSize: 20,
      color: Colors.black,
    ),
  ),
);

ThemeData darkTheme = ThemeData(
  primaryColor: Colors.teal,
  scaffoldBackgroundColor: Colors.black,
  appBarTheme: const AppBarTheme(
    color: Colors.teal,
    elevation: 0,
    iconTheme: IconThemeData(color: Colors.white),
  ),
  textTheme: const TextTheme(
    titleLarge: TextStyle(
      fontSize: 25,
      color: Colors.white,
    ),
  ),
);