Theme context issue: 2 move home to own widget

main.dart

import 'package:flutter/material.dart';

ThemeData getLightTheme() => ThemeData(
      brightness: Brightness.light,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.light,
      ),
    );

ThemeData getDarkTheme() => ThemeData(
      brightness: Brightness.dark,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.dark,
      ),
    );

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _themeMode = ThemeMode.light;

  void _toggleThemeMode() {
    setState(() {
      _themeMode =
          _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        theme: getLightTheme(),
        darkTheme: getDarkTheme(),
        themeMode: _themeMode,
        debugShowCheckedModeBanner: false,
        home: HomePage(onToggleThemeMode: _toggleThemeMode),
      );
}

class HomePage extends StatelessWidget {
  const HomePage({super.key, required this.onToggleThemeMode});
  final VoidCallback onToggleThemeMode;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Theme Mode Example'),
        actions: [
          IconButton(
            icon: const Icon(Icons.brightness_6),
            onPressed: onToggleThemeMode,
          ),
        ],
      ),
      body: Center(
        child: Text(
          'TEXT',
          style: Theme.of(context).textTheme.bodyLarge,
        ),
      ),
    );
  }
}