深色主题

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 24 课，共 30 课。

很多人会让手机保持深色模式，尤其是在晚上。应用可以有两种主题：浅色主题用 theme:，深色主题用 darkTheme:。

深色配色方案基于同一个种子颜色生成，只需再添加一项设置：

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 会反转配色方案：使用深色的 surface 和浅色的 onSurface 文字，并采用更柔和、不刺眼的种子颜色色调。

themeMode: 用来选择使用哪种主题。默认值 ThemeMode.system 会跟随手机的设置；无论手机设置如何，ThemeMode.light 和 ThemeMode.dark 都会固定选择一种主题。读取主题的每个组件都会随之改变。

挑战

简单

为 Night Reader 设置深色外观：

使用种子颜色 darkTheme:，值为 Colors.indigo，并设置 brightness: Brightness.dark
设置 themeMode: ThemeMode.dark，这样主题就始终为深色

亲手试试

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