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

Question

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 代码查询用户的偏好。

Answer 1

您可以使用window.matchMedia用于监听 prefers-color-scheme 更改的 API媒体查询标准化为 Media Queries Level 5 。请参阅CanIUse.com用于浏览器支持。

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

1. 将下面所示的 JavaScript 代码放入 /frontend/prefers-color-scheme.js
2. 在主视图上添加注释 @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