主题管理

以Fluent风格为例

material风格也一样

1. 在main文件设置主题模式和主题颜色

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return FluentApp(
      title: "Hello World!",
      debugShowCheckedModeBanner: false, // 取消debug开发阶段的短横幅
      /*
      主题模式 light/dark
      ThemeMode.system : 跟随系统
      ThemeMode.light : 浅色模式
      ThemeMode.dark : 深色模式
      */
      themeMode: ThemeMode.system,
      /*
      theme/darkTheme : 设置浅色/深色主题下,使用的默认配色
      */
      theme: FluentThemeData.light(),
      darkTheme: FluentThemeData.dark(),
      home: const PageHome(),
    );
  }
}

• 在themeMode设置主题模式
• 通过theme和daerk来设置两个模式下使用的颜色（上图使用的是Fluent风格自带的主题色）

2. 在需要的地方使用主题色变量

Container(
	color: fluent.FluentTheme.of(context).micaBackgroundColor,
	child: Text("Hello World!"),
)

fluent.FluentTheme.of(context)是fluent风格主题色对象，上面🌰使用的是背景色。

这样使用了主题变量的Widget就会根据themeMode来变换。