颤振3 Web应用:自定义颜色或主题

Question

我是新来的，所以请你对我放松点。我用的是颤音3和Dart 2.17。

我正在制作一个网络应用程序，并试图为我的应用程序设置配色方案。在CSS中，我通常会这样做来为光和暗模式定义一组颜色：

:root {
  --alpha: #FFF;
  --bravo: #F5F5F6;
}

@media (prefers-color-scheme: dark) {
  --alpha: #222630;
  --bravo: #171920;
}

我读过Flutter的ThemeData，据我所知，这是一个很大的风格列表，所以如果我要制作一个Android应用程序，我会对移动UI的各个部分有一些合理的默认设置。但是，由于我正在制作一个具有完全自定义用户界面的web应用程序，这感觉像是我不想要的很多额外的东西。

当我在光模式和暗模式之间切换时，有什么好的方法来定义一组颜色名称并让它们自动切换它们的值？我还应该使用ThemeData吗？或者，当我的UI是自定义的时候，还有更简单的方法吗？

我希望有这样的东西(这可能是无效的，我还在学习)：

//My view
Container(color: MyColors.alpha)

...and值读取如下所示：

//Some other class
class MyColors {
  final alpha = darkMode ? const Color(0XFF222630) : const Color(0xFFFFFFFF);
  final bravo = darkMode ? const Color(0xFF171920) : const Color(0xFFF5F5F6);
}

有人做过这样的事吗？

Answer 1

我建议您使用@ ThemeMode themeMode变量(在这里阅读mobx状态管理)来更改整个小部件树的状态，例如，当用户更改应用主题时，从MaterialApp开始。

themeMode: themeMode != null
                ? _controller.themeMode!
                : WidgetsBinding.instance.window.platformBrightness == Brightness.light
                    ? ThemeMode.light
                    : ThemeMode.dark,

仍然使用ThemeData设置您希望组件使用的颜色，如下所示

darkTheme: ThemeData(
                scaffoldBackgroundColor: MyColors.alphaDark,
                backgroundColor: MyColors.alphaDark,
                cardColor: MyColors.alphaDark,)
theme: ThemeData(
                scaffoldBackgroundColor: MyColors.bravoLight,
                backgroundColor: MyColors.bravoLight,
                cardColor: MyColors.bravoLight,)

class MyColors {
  final alphaDark = const Color(0XFF222630);
  final bravoLight = const Color(0xFFF5F5F6);
}

Container(color: Theme.of(context).cardColor)

而且您可以始终创建一个自定义的ThemeData，这样您就可以随意调用组件。