A Dark Theme

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 24 of 30.

Many people keep their phone in dark mode, especially at night. An app can have two themes: theme: for light and darkTheme: for dark.

A dark color scheme comes from the same seed, with one more setting:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.dark,
  home: ...,
)

brightness: Brightness.dark turns the scheme around: a dark surface with light onSurface text, and softer tones of the seed that do not glare.

themeMode: chooses which theme is used. ThemeMode.system, the default, follows the phone's setting; ThemeMode.light and ThemeMode.dark pick one whatever the phone says. Every widget that reads the theme changes with it.

Challenge

Easy

Give Night Reader a dark look:

a darkTheme: from the seed Colors.indigo with brightness: Brightness.dark
themeMode: ThemeMode.dark, so it is always dark

Try it yourself

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: const Center(
          child: Text('Good evening', style: TextStyle(fontSize: 28)),
        ),
      ),
    );
  }
}