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

Question

Vaadin Flow 14 随附其两个捆绑主题 Lumo 和 Material.[= 的浅色和深色版本。 12=]

现在。

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

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

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

Answer 1

您可以使用 window.matchMedia API to listen for changes to the prefers-color-scheme media query standardized in Media Queries Level 5. See 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

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

Vaadin Flow app switch between light and dark modes automatically

themes

vaadin

vaadin-flow