Приложение Vaadin Flow автоматически переключает светлый и темный режимы

Vaadin Flow 14 поставляется со светлой и темной версиями двух связанных тем: Lumo и Material.

И теперь браузеры могут запрашивать у ОС хоста предпочтения пользователя для светлого или темного режима.

Есть ли способ, чтобы приложение Vaadin автоматически использовало светлый или темный вариант темы в соответствии с пожеланиями пользователя?

Маркус Хеллберг написал полезный пост о том, как переключать светлый / темный режим вариантов темы. программно. Мне интересно, сможет ли Vaadin 14 переключаться автоматически теперь, когда пользовательские настройки можно определить из браузера.

В противном случае, возможно, Кто-то может показать Java-код, чтобы узнать о предпочтениях пользователя из серверного Java-кода.


themes vaadin vaadin-flow
person Basil Bourque    schedule 23.12.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете использовать window.matchMedia API для отслеживания изменений в стандартизированный медиа-запрос prefers-color-scheme в Media Queries Level 5. См. 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();

Источник: https://gist.github.com/emarc/690eb2659c8b51cb8957c19914d65e

person Marcus Hellberg    schedule 24.12.2019
comment
IntelliJ 2019.1 выдает предупреждение об этом вызове addListener, говоря: «Используется устаревший символ». - person Basil Bourque; 24.12.2019
comment
Ух ты! Это работает динамически. При первом чтении вашего кода я не понял, что слушатель продолжается. Так что я попробовал. Я переключил свой Mac на macOS Mojave System Preferences ›General› Appearance, и моя страница веб-приложения Vaadin сразу же переключается в светлый или темный режим вместе с собственными работающими приложениями. - person Basil Bourque; 24.12.2019
comment
См. этот видеоролик с экрана, демонстрирующий, как пользователь переключает Mac из светлого режима в темный и обратно, а также веб-приложение Vaadin. меняется автоматически. - person Basil Bourque; 24.12.2019