Implementing dark mode in flutter using riverpod

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(ProviderScope(child: DarkModeExample()));
}

class DarkModeExample extends ConsumerWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final themeMode = watch(themeModeProvider).state;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Dark Mode Demo',
      themeMode: themeMode,
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        // Add any other property here
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        // Add any other property here
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Dark Mode",
              style: TextStyle(fontSize: 28),
            ),
            Consumer(
              builder: (BuildContext context,
                  T Function<T>(ProviderBase<Object, T>) watch, Widget child) {
                final isDarkMode = watch(isDarkModeProvider);
                return CupertinoSwitch(
                    value: isDarkMode,
                    onChanged: (value) {
                      if (value) {
                        context.read(themeModeProvider).state = ThemeMode.dark;
                      } else {
                        context.read(themeModeProvider).state = ThemeMode.light;
                      }
                    });
              },
            )
          ],
        ),
      ),
    );
  }
}

final themeModeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.system);
final isDarkModeProvider = Provider<bool>((ref) {
  final themeMode = ref.watch(themeModeProvider).state;
  return themeMode == ThemeMode.dark;
});