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, 
                ),