打开 app.dart，这里用了一个 MaterialApp 小部件，设置了一下它的主题，还有暗色主题。这个 AppTheme 是之前我们自己创建的，它里面的 light 还有 dark 可以返回一个主题数据，也就是 ThemeData。

如果应用正在初始化，也会使用一个 MaterialApp，同样这里可以设置一下 theme，值是 AppTheme.light，再设置一下 darkTheme，值是 AppTheme.dart 。

颜色

然后打开 AppTheme，在文件的顶部可以定义一些常用的颜色，用 const 声明一个 primaryColor 表示主颜色，值是一个 Color ，0xff6e64ef，在编辑器左边这里会显示这种颜色。复制一份，声明一个对应的暗色版本的主颜色，名字是 primaryColorDark，颜色值是一样的。

下面声明一个 secondaryColor，第二颜色，值是一个 Color，0xfff0d64d ，复制一份，声明一个 secondaryColorDark。

然后再声明一个 primaryTextColor，主要的文字颜色，它的值是一个 Color，0xff000000。复制一份，声明一个 primaryTextColorDark，值是 0xffb1b1b1。

再声明一个文字颜色，名字是 secondaryTextColor，设置一下颜色值，Color，0xff585858。复制一份，声明一个对应的暗色版本的颜色，名字是 secondaryTextColorDark 。

下面可以再声明一个主要的背景颜色，primaryBackgroundColor，用一下 Colors.white，复制一份，再声明一个 primaryBackgroundColorDark ，颜色值是 Color， 0xff222222。

主题

然后我们再修改一下 AppTheme 里的 light 还有 dark 这两个静态属性。把这个 ThemeData 的 primaryColor 的值设置成 primaryColor，accentColor 设置成 secondaryColor。colorScheme 这里的 primary 设置成 primaryColor，再把 secondary 设置成 secondaryColor。 要修改 Scaffold 默认的背景颜色，可以设置一下 scaffoldBackgroundColor，值是 primaryBackgroundColor。

再调整一下 dark 这个静态属性，primaryColor 的值是 primaryColorDark ，accentColor 的值设置成 secondaryColorDark，colorScheme 里的 primary 设置成 primaryColorDark，再把 secondary 设置成 secondaryColorDark。

下面再设置一下 scaffoldBackgroundColor ，对应的值是 primaryBackgroundColorDark。

测试

要预览样式需要重启一下，可以使用快捷键 command + shift + F5 。 现在应用使用的亮色主题，要预览暗色主题，可以使用快捷键 command + shift + A ，切换使用亮色与暗色主题。

现在这个用户这个页面的背景颜色是白色，打开 user_profile.dart，这里我们之前手工设置了一下这个 Container 的背景颜色，如果不特别设置的话，默认用的就是 Scaffold 默认的背景颜色 。