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 代码查询用户的偏好。
最佳答案
您可以使用window.matchMedia用于监听 prefers-color-scheme 更改的 API媒体查询标准化为 Media Queries Level 5 。请参阅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
关于themes - Vaadin Flow 应用程序自动在明暗模式之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59462273/