Flutter web 在带有深色主题的 Android 浏览器中的颜色错误

Posted 2023-02-23

【中文标题】Flutter web 在带有深色主题的 Android 浏览器中的颜色错误

【英文标题】：Flutter web has wrong colors in browser on Android with dark theme

【发布时间】：2020-12-31 10:23:56

【问题描述】：

android 上的 Opera Touch 浏览器在使用 Flutter 创建的网站上应用深色主题样式，适用于启用深色主题的设备。

似乎所有Text 小部件都已更改，例如从黑色到白色，但像 Container 这样的小部件的背景并不总是改变。这使网页无法阅读。

有没有办法在 Flutter 中禁用它，比如不让浏览器应用自己的主题？

我尝试强制使用浅色主题，但这没有帮助。

MaterialApp(
  title: webpageTitle,
  themeMode: ThemeMode.light,
  darkTheme: ThemeData(brightness: Brightness.light)
  ...
)

【参考方案1】：

我不知道 Opera 专有的黑色主题“扩展”，但我看到了一些我使用的 chrome 扩展的源代码，一般来说，他们所做的是应用全局“.invert”，或者循环整个网页元素并有选择地更改 css/aplying invert。

由于颤振无法控制这种行为，所以没有办法.. 至少在 dart 中没有。

您可以在应用中应用深色主题，并将其设置为默认主题。这可能是最简单的方法。

您还可以对 opera 执行的脚本进行逆向工程，并通过禁用变量或覆盖函数来使用您自己的 javascript 来对抗它，脚本将无法更改您的应用程序颜色。

您可以使用this plugin 在您的网络应用程序中直接包含 javascript。

我会使用第一个选项，因为大多数扩展都无法提供漂亮的深色主题，所以最好自己实现它。甚至使用 javascript 来检查脚本使用的变量，如果它们存在，您可以从 javascript 调用您的应用程序以启用黑暗主题//向用户显示应用程序无法与该扩展程序一起正常工作的警告。

这将是 Flutter Web 应用程序在未来反复出现的问题。看看这个answer，虽然它只适用于chrome扩展，也许有一天会有一个类似于antiadblock的antidark脚本

【讨论】：

感谢您的回答，它给了我一些有价值的信息。虽然问题是关于 Android 上的 Opera Touch，所以它不是反转颜色的扩展，而是默认的浏览器行为 AFAIK。我也不确定将深色主题设为默认主题会解决该问题 - 浏览器可能会恢复颜色，因此页面几乎是白色的。现在我真的没有在这里看到一个好的解决方案