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 API 来侦听对Media Queries Level 5 中标准化的prefers-color-scheme 媒体查询的更改。浏览器支持见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