Переключение цветовой схемы

Aura и Lumo поддерживают светлую и темную цветовые схемы. Можно выбрать цветовую схему по умолчанию и переключать ее во время работы приложения без изменения темы приложения.

Варианты цветовой схемы

Обе темы поддерживают следующие варианты:

  • Светлая — всегда использует светлую цветовую схему.

  • Темная — всегда использует темную цветовую схему.

  • Системная — использует настройку операционной системы или браузера.

Настройка схемы по умолчанию

По умолчанию приложение использует светлую цветовую схему. Чтобы выбрать другой вариант, добавьте аннотацию @ColorScheme к основному классу приложения:

import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.component.page.ColorScheme;

@ColorScheme(ColorScheme.Value.LIGHT_DARK)
public class MyProjectApplication implements AppShellConfigurator {
    // ...
}

Для светлой и темной цветовых схем используйте следующие значения ColorScheme.Value:

  • LIGHT всегда использует светлую цветовую схему.

  • DARK всегда использует темную цветовую схему.

  • LIGHT_DARK следует настройке операционной системы или браузера; если настройка недоступна, используется светлая схема.

  • DARK_LIGHT следует настройке операционной системы или браузера; если настройка недоступна, используется темная схема.

Изменение текущего UI

Используйте Page.setColorScheme(), чтобы изменить цветовую схему текущего UI во время работы приложения:

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.page.ColorScheme;

UI.getCurrentOrThrow().getPage()
        .setColorScheme(ColorScheme.Value.DARK);
Page.setColorScheme() не сохраняет выбранное значение. Сохраните его отдельно, если его нужно восстановить в следующем сеансе.

Сохранение предпочтения пользователя

Jmix предоставляет ThemeUtils для сохранения цветовой схемы в локальном хранилище браузера и ее применения к текущему UI. Сначала импортируйте скрипт поддержки цветовых схем Jmix в основном классе приложения:

@JsModule("./src/theme/color-scheme-switching-support.js")

Затем вызовите один из следующих методов:

import io.jmix.flowui.kit.theme.ThemeUtils;

ThemeUtils.applyLightTheme();
ThemeUtils.applyDarkTheme();
ThemeUtils.applySystemTheme();

Вариант system использует настройку операционной системы или браузера. Действие userMenu_themeSwitch предоставляет те же три варианта в пользовательском меню.

Для одной настройки используйте либо механизм Jmix ThemeUtils, либо собственный код на основе Page.setColorScheme(). Одновременное использование может привести к конфликту.

CSS для цветовых схем

Используйте функцию CSS light-dark(), чтобы задать значение для обеих цветовых схем:

html {
    --vaadin-text-color: light-dark(#202124, #f5f5f5);
}

Aura

Aura предоставляет отдельные исходные свойства с суффиксами -light и -dark. Задайте оба свойства, чтобы настроить цвет для обеих схем:

html {
    --aura-accent-color-light: blue;
    --aura-accent-color-dark: lightskyblue;
}

Lumo

В Lumo присвойте light-dark() непосредственно свойству темы:

html {
    --lumo-primary-color: light-dark(blue, lightskyblue);
}