Flutter 3 Web应用如何实现自定义深浅模式颜色自动切换

完全可以实现你预期的MyColors.xxx直接调用、自动跟随深浅模式切换的效果，不需要强制使用全量配置的ThemeData，针对全自定义UI的Web场景有非常轻量的实现，逻辑和你写CSS定义CSS变量+媒体查询的思路几乎一致。

核心轻量实现（无冗余，推荐全自定义UI场景使用） #

不需要引入第三方库，也不需要写复杂的状态监听，直接借助Flutter自带的平台亮度检测能力，通过静态getter实时返回对应模式下的颜色值即可。

1. 首先定义你的颜色常量类：

import 'dart:ui';
import 'package:flutter/material.dart';

class MyColors {
  // 私有构造函数，禁止类被实例化
  MyColors._();

  // 实时检测当前系统是否为深色模式
  static bool get _isDark =>
      PlatformDispatcher.instance.platformBrightness == Brightness.dark;

  // 按需定义你的具名颜色，调用时自动匹配当前模式的色值
  static Color get alpha =>
      _isDark ? const Color(0xFF222630) : const Color(0xFFFFFFFF);
  static Color get bravo =>
      _isDark ? const Color(0xFF171920) : const Color(0xFFF5F5F6);
}

2. 业务代码里直接按你预期的方式调用即可：

// 任意组件中直接使用，无需传BuildContext
Container(
  color: MyColors.alpha,
  child: Text(
    "测试文本",
    style: TextStyle(color: MyColors.bravo),
  ),
)

当系统切换深浅模式时，Flutter会自动触发组件重绘，getter会实时读取最新的系统亮度返回对应色值，不需要你手动写任何模式切换的监听逻辑。

关于是否需要使用ThemeData #

不需要强制使用全量配置的ThemeData，根据你的实际场景选择即可：

• 如果你是100%自绘UI，完全不使用Material/Cupertino提供的默认组件，上述MyColors方案已经完全满足需求，没有任何冗余配置，和你写CSS的使用习惯完全对齐。
• 如果你偶尔会用到少量官方自带组件（比如输入框、滚动组件等），也不需要把ThemeData的几十上百个属性全配置一遍，只需要配置你实际用到的属性即可，未配置的属性不会对你的自定义逻辑产生任何影响。如果后续需要支持手动切换深浅模式（而非仅跟随系统），只需要把_isDark的判断逻辑替换为你自己维护的全局模式状态即可，业务侧的MyColors.xxx调用代码不需要做任何修改。

内容的提问来源于stack exchange，提问作者Clifton Labrum