Vaadin Flow 14 附带了两个捆绑主题的浅色和深色版本，Lumo and Material.
And now 浏览器可以向主机操作系统询问用户对浅色或深色模式的偏好 https://stackoverflow.com/q/50840168/642706.
有没有办法让 Vaadin 应用程序根据用户的意愿自动使用浅色或深色主题变体？
马库斯·赫尔伯格写道关于如何切换亮/暗模式的有用帖子 https://vaadin.com/learn/tutorials/toggle-dark-theme以编程方式进行主题变体。我想知道 Vaadin 14 是否能够自动切换，因为可以从浏览器中检测到用户首选项。
如果没有，也许有人可以显示 Java 代码，用于从服务器端 Java 代码查询用户的偏好。
您可以使用window.matchMedia https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia用于监听更改的 APIprefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme媒体查询标准化媒体查询级别 5 https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme. See CanIUse.com https://caniuse.com/#search=prefers-color-scheme用于浏览器支持。
那个CSS媒体专题 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features配色方案偏好有 3 个可能的值：no-preference, light, and 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();
Source: https://gist.github.com/emarc/690eb2659c8b51cb895716914d65ec19 https://gist.github.com/emarc/690eb2659c8b51cb895716914d65ec19
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
