You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Flutter中使用flutter_tex时强制启用浅色模式,禁用安卓深色适配

解决方案

问题核心原因

白色背景不生效是安卓10及以上系统WebView的强制深色反转逻辑导致:系统开启深色模式时,WebView会自动将页面纯白色(#FFFFFF)背景反转为深色,其余非纯白颜色不受影响,这就是设置其他背景色正常、唯独白色失效的原因。此前尝试的Flutter层主题配置、AndroidManifest配置不生效,是因为这部分配置没有作用到flutter_tex内部初始化的WebView实例上。

可行解决方法

方案1:给HTML内容添加强制浅色模式声明(优先使用,无需修改原生代码)

在TeXViewDocument的HTML内容开头添加强制浅色模式的CSS声明,直接告知WebView该页面不需要适配深色模式,修改后的代码示例:

class _Maths extends StatelessWidget {
  const _Maths({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const TeXView(
      renderingEngine: TeXViewRenderingEngine.katex(),
      child: TeXViewDocument(
        // 新增强制浅色模式的样式声明
        r"""
        <style>
          :root { color-scheme: light only; }
          body { background-color: #FFFFFF !important; margin: 0; padding: 0; }
        </style>
        <h3>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</h3>
        """,
        style: TeXViewStyle(
          textAlign: TeXViewTextAlign.Center,
          backgroundColor: Colors.white,
        ),
      ),
      style: TeXViewStyle(
        margin: TeXViewMargin.all(5),
        padding: TeXViewPadding.all(10),
        border: TeXViewBorder.all(
          TeXViewBorderDecoration(
            borderColor: Colors.blue,
            borderStyle: TeXViewBorderStyle.Solid,
            borderWidth: 1,
          ),
        ),
        backgroundColor: Colors.white,
      ),
    );
  }
}

该方案可覆盖绝大多数场景,无需修改原生配置。

方案2:原生层关闭WebView强制深色模式

如果方案1不生效,可在安卓项目原生层全局关闭WebView的强制深色特性:

  1. 打开安卓项目下的app/src/main/kotlin/你的包名/MainActivity.kt(或Java对应文件)
  2. 在onCreate方法中添加对应代码:
  • Kotlin版本
import android.os.Build
import android.webkit.WebSettings
import android.webkit.WebView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        // 全局关闭WebView强制深色反转
        val webView = WebView(this)
        webView.settings.forceDark = WebSettings.FORCE_DARK_OFF
    }
}
  • Java版本
import android.os.Build;
import android.webkit.WebSettings;
import android.webkit.WebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        WebView webView = new WebView(this);
        webView.getSettings().setForceDark(WebSettings.FORCE_DARK_OFF);
    }
}

内容的提问来源于stack exchange,提问作者ThomasG2201

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 06:36:04