Skip to content

Instantly share code, notes, and snippets.

@emarc
emarc / prefers-color-scheme.js
Last active November 25, 2019 07:38
Automatically switch Vaadin application between Light and Dark mode depending on OS settings
// 1. @JsModule("prefers-color-scheme.js") on your main view
// 2. Put this in /frontend/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();