I defined a global theme which is called in my main.dart. This is the code:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'package:my_app/blocs/login_bloc/login_bloc.dart';
import 'package:my_app/view/screens/home_page.dart';
import 'package:my_app/theme/themes.dart';
import 'package:my_app/view/screens/login_page.dart'

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => LoginBloc(),
        )
      ],
      child: MaterialApp(
        title: 'Flutter Firebase Auth',
        theme: Themes.lightTheme(),
        initialRoute: '/',
        routes: {
          '/': (context) => const LoginPage(),
          '/home': (context) => const HomePage(),
        },
      ),
    );
  }
}

When I navigate to LoginPage() in the app then the theme Themes.lightTheme() is used. But when I reach HomePage(), the theme won’t be used.

This is home_page.dart:

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

import '../../blocs/login_bloc/login_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    String userId = Global.userId;

    return Theme(
      data: theme,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
          actions: [
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                Navigator.of(context).pushNamed('/');
              },
            ),
          ],
        ),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Center(
                child: Text(
                  'Welcome',
                  style: TextStyle(fontSize: 34, fontWeight: FontWeight.normal),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

What am I missing? It really appears that the issue lies within the routing. Is maybe Navigator.of(context).pushNamed('/'); the problem and is there an alternative which I should use?