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代码中查询用户的偏好。
答案 0 :(得分：5)
您可以使用window.matchMedia API来监听对prefers-color-scheme中标准化的Media Queries Level 5媒体查询的更改。有关浏览器支持，请参见CanIUse.com。
该颜色优先的CSS media feature具有3个可能的值：$(document).ready(function(){
$('form').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
alert("Form Submission prevented/stopped.");
});
$('#place_order').click(function() {
alert("This is a test message... please ignore this.");
});
});
，no-preference和light。以下代码在dark上查找匹配项。
dark /frontend/prefers-color-scheme.js @JsModule("prefers-color-scheme.js")来源：https://gist.github.com/emarc/690eb2659c8b51cb895716914d65ec19