Flutter设置ThemeMode为Light时主题不生效问题排查与解决

问题核心 #

当MaterialApp的themeMode设为ThemeMode.system时，系统切换主题可正常生效，但改为ThemeMode.light后，主题未按预期切换为浅色模式。

问题原因 #

1. 主题判断逻辑错误：你使用的DarkMode扩展依赖MediaQuery.of(this).platformBrightness，这个值是系统级的亮度设置，和MaterialApp的themeMode无关。即使应用强制设为浅色模式，只要系统是深色，这个值仍会返回Brightness.dark，导致判断结果和实际应用主题不符。
2. 主题配置可能不完整：如果AppTheme中的ThemeData没有明确指定brightness，或者MaterialApp未正确绑定theme/darkTheme，也会导致主题切换异常。

解决方案 #

1. 修正主题判断逻辑 #

将扩展中的判断依据改为从当前应用的ThemeData获取亮度，而非系统平台亮度：

import 'package:flutter/material.dart';

extension DarkMode on BuildContext {
  bool get isDarkMode {
    // 从当前应用主题获取亮度，确保和themeMode同步
    final brightness = Theme.of(this).brightness;
    return brightness == Brightness.dark;
  }
}

2. 确保MaterialApp主题配置正确 #

绑定AppTheme的明暗主题，并明确设置themeMode：

MaterialApp(
  theme: AppTheme.lightTheme, // 绑定浅色主题
  darkTheme: AppTheme.darkTheme, // 绑定深色主题
  themeMode: ThemeMode.light, // 强制使用浅色模式，可按需切换为dark/system
  home: const YourHomePage(),
);

3. 完善AppTheme的主题配置（推荐） #

在ThemeData中明确指定brightness，确保主题的亮度标识准确：

class AppTheme {
  static final lightTheme = ThemeData(
    brightness: Brightness.light, // 明确标记为浅色主题
    // 其他浅色主题配置（如colorScheme、textTheme等）
  );
  static final darkTheme = ThemeData(
    brightness: Brightness.dark, // 明确标记为深色主题
    // 其他深色主题配置
  );
}

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