如何根据深色/浅色主题设置颜色？

Question

我想设置深色和浅色配色方案并将其用作容器的背景色。

这是我的代码：

Container(
  padding: const EdgeInsets.all(kDefaultPadding),
  //change required here:
  decoration: const BoxDecoration(color: kDarkColor),
  child: ... ,
)

Answer 1

您可以使用 MediaQuery 中的 platformBrightness。

final isDarkTheme = MediaQuery.of(context).platformBrightness == Brightness.dark;

  Container(
    padding: const EdgeInsets.all(kDefaultPadding),
    //change required here
    decoration: const BoxDecoration(color: isDarkTheme? kDarkColor: kLightColor),
    child: Column(
    // ...
  ),

另见

Answer 2

我们可以通过从 ThemeData 中读取颜色来实现。

设置主题

// light Theme
ThemeData lightThemeData(BuildContext context) {
  return ThemeData.light().copyWith(
    backgroundColor: Colors.grey.shade100,
  );
}

// dark Theme
ThemeData darkThemeData(BuildContext context) {
  return ThemeData.dark().copyWith(
    backgroundColor: Colors.grey.shade900,
  );
}

在 MaterialApp 中配置主题

      theme: lightThemeData(context),
      darkTheme: darkThemeData(context),

终于用上了

BoxDecoration(color: Theme.of(context).backgroundColor),

Answer 3

在您的根文件 (main.dart) 中，您的应用程序入口点位于。通常，您有一个 class MyApp 其中 returns 一个 MaterialApp 小部件。这个来自 Flutter SDK 的开箱即用小部件可让您定义应用程序的主题。这里可以定义主题。

在您的 Container 中，您可以直接通过颜色参数指定颜色。要引用您的主题数据，请执行以下操作：例如 Theme.of(context).backgroundColor。

如何根据深色/浅色主题设置颜色？

How to set the color based on dark / light theme?

flutter

flutter-theme