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

Question

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

这是我的代码：

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

Answer 1

在您的根文件 ( main.dart) 中，您可以找到应用程序的入口点。一般来说，你有一个class MyApp返回一个MaterialApp小部件。Flutter SDK 中的这个开箱即用的小部件可让您定义应用程序的主题。在这里您可以定义主题。

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

Answer 2

您可以platformBrightness从 MediaQuery 使用。

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 3

我们可以通过从 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),