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

Answer 1

您可以使用window.matchmediaAPI侦听对媒体查询级别5中标准化的prefers-color-scheme媒体查询的更改。有关浏览器支持，请参阅caniuse.com。

配色方案首选项CSS媒体功能有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();