如何在全局颜色常量类中定义随明暗主题切换的动态颜色并全局调用

我明白你想要的效果——在全局的颜色常量类里定义一个能自动跟随明暗主题切换的颜色，不用每次在组件里重复写判断逻辑对吧？这在Flutter里是很常见的需求，我给你两种实用的方案，你可以根据自己的场景选择：

方案一：在AppColors中添加依赖Context的静态方法（快速实现） #

首先要明确：静态常量是编译时就确定的值，没法随着运行时的主题变化而改变，所以我们得用动态方法来根据当前主题返回对应颜色。你只需要在现有的AppColors类里新增静态方法，传入BuildContext来判断当前主题：

class AppColors {
  // BOTH
  static const white = Color(0xffFFFFFF);
  static const greyColor = Color(0xff8f8f8f);

  // LIGHT
  static const bgColorLight = Color(0xffecf4f9);
  static const primaryColorLight  = Color(0xff0072BC);

  // DARK
  static const bgColorDark = Color(0xff1b1b1b);
  static const primaryColorDark = Color(0xfffc9152);

  // 动态标题颜色：根据当前主题明暗切换
  static Color titleColor(BuildContext context) {
    // 获取当前主题的亮度
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
    return isDarkMode ? Color(0xff8f8f8f) : Color(0xff050505);
  }

  // 你还可以添加其他动态颜色，比如副标题颜色
  static Color subtitleColor(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    return isDark ? Color(0xffcccccc) : Color(0xff333333);
  }
}

调用的时候，在Widget的build方法里直接传context就行（因为只有在build上下文里才能获取当前主题）：

Text(
  'HELLO WORLD',
  style: TextStyle(color: AppColors.titleColor(context)),
);

这个方案的好处是改动极小，不用动你现有的主题配置，适合快速实现少量动态颜色的需求。唯一需要注意的是，调用时必须传入context，不过在组件的build方法里这完全不是问题。

方案二：使用ThemeExtension（推荐，符合Flutter主题规范） #

如果你希望更规范地管理主题颜色，和Flutter自带的主题系统深度融合，那推荐用ThemeExtension的方式。这种方式把动态颜色和你的明暗主题绑定在一起，扩展性更强：

步骤1：定义自定义ThemeExtension类 #

先创建一个专门的类来存放你的动态主题颜色：

class AppThemeColors extends ThemeExtension<AppThemeColors> {
  final Color titleColor;
  final Color subtitleColor;

  const AppThemeColors({
    required this.titleColor,
    required this.subtitleColor,
  });

  // 浅色主题对应的颜色配置
  static const light = AppThemeColors(
    titleColor: Color(0xff050505),
    subtitleColor: Color(0xff333333),
  );

  // 深色主题对应的颜色配置
  static const dark = AppThemeColors(
    titleColor: Color(0xff8f8f8f),
    subtitleColor: Color(0xffcccccc),
  );

  // 实现ThemeExtension要求的方法（用于主题过渡和复制）
  @override
  ThemeExtension<AppThemeColors> copyWith({
    Color? titleColor,
    Color? subtitleColor,
  }) {
    return AppThemeColors(
      titleColor: titleColor ?? this.titleColor,
      subtitleColor: subtitleColor ?? this.subtitleColor,
    );
  }

  @override
  ThemeExtension<AppThemeColors> lerp(
      ThemeExtension<AppThemeColors>? other, double t) {
    if (other is! AppThemeColors) return this;
    return AppThemeColors(
      titleColor: Color.lerp(titleColor, other.titleColor, t)!,
      subtitleColor: Color.lerp(subtitleColor, other.subtitleColor, t)!,
    );
  }
}

步骤2：把扩展加到你的明暗主题里 #

修改MyTheme类，把上面的AppThemeColors添加到lightTheme和darkTheme的extensions里：

class MyTheme {
  static final lightTheme = ThemeData(
    brightness: Brightness.light,
    backgroundColor: AppColors.bgColorLight,
    primaryColor: AppColors.primaryColorLight,
    // 加入自定义主题扩展
    extensions: const [AppThemeColors.light],
  );

  static final darkTheme = ThemeData(
    brightness: Brightness.dark,
    backgroundColor: AppColors.bgColorDark,
    primaryColor: AppColors.primaryColorDark,
    extensions: const [AppThemeColors.dark],
  );
}

步骤3：调用动态颜色 #

你可以直接通过Theme.of(context)获取扩展颜色，为了更简洁，还可以给BuildContext加个扩展：

// 可选：给BuildContext加扩展，简化调用
extension AppColorExtension on BuildContext {
  AppThemeColors get appColors => 
      Theme.of(this).extension<AppThemeColors>() ?? AppThemeColors.light;
}

这样调用起来就非常清爽：

Text(
  'HELLO WORLD',
  style: TextStyle(color: context.appColors.titleColor),
);

这个方案的优点是完全贴合Flutter的主题系统，当你切换themeMode时，颜色会自动更新；而且后续新增动态颜色只需要在AppThemeColors里加字段即可，维护起来更方便。

备注：内容来源于stack exchange，提问作者joisberg