Vaadin Flow 应用程序自动在明暗模式之间切换

Posted 2023-03-06

【中文标题】Vaadin Flow 应用程序自动在明暗模式之间切换

【英文标题】：Vaadin Flow app switch between light and dark modes automatically

【发布时间】：2020-04-15 03:40:00

【问题描述】：

Vaadin Flow 14 附带两个捆绑主题的浅色和深色版本，Lumo 和 Material。

现在是browsers can ask the host OS for the user’s preference for light or dark modes。

有没有办法让 Vaadin 应用程序根据用户的意愿自动使用浅色或深色主题变体？

Marcus Hellberg 以编程方式编写了a helpful post on how to switch light/dark mode 主题变体。我想知道 Vaadin 14 是否能够在浏览器中检测到用户偏好后自动切换。

如果没有，也许有人可以显示 Java 代码，以便从服务器端 Java 代码中查询用户的偏好。

【参考方案1】：

您可以使用window.matchMedia API 来侦听对Media Queries Level 5 中标准化的prefers-color-scheme 媒体查询的更改。浏览器支持见CanIUse.com。

配色方案偏好的 CSS media feature 有 3 个可能的值：no-preference、light 和 dark。下面的代码在dark 上查找匹配项。

将如下所示的javascript代码放入/frontend/prefers-color-scheme.js 在您的主视图上，添加注释@JsModule("prefers-color-scheme.js")

let mm = window.matchMedia('(prefers-color-scheme: dark)');
function apply() 
    document.documentElement.setAttribute("theme",mm.matches?"dark":"");

mm.addListener(apply);
apply();

来源：https://gist.github.com/emarc/690eb2659c8b51cb895716914d65ec19

【讨论】：

IntelliJ 2019.1 对 addListener 调用发出警告，称“使用了已弃用的符号”。

哇！这确实是动态的。在我第一次阅读您的代码时，我不明白监听器正在运行。所以我试了一下。我在 macOS Mojave System Preferences > General > Appearance 中切换了我的 Mac，果然我的 Vaadin Web 应用程序页面立即与本机运行的应用程序一起切换到 Light Mode 或 Dark Mode。

查看this video screen clip 演示用户将 Mac 从浅色模式切换到深色模式并再次切换回来，并且 Vaadin 网络应用程序会自动更改。