切换配色方案

Aura 和 Lumo 主题各自都提供了浅色和深色的配色方案。可以为应用程序选择一个默认的配色方案，并在运行时进行切换，而无需更改应用程序主题。

配色方案

两种主题均支持以下方案：

  • Light – 始终使用浅色方案。

  • Dark – 始终使用深色方案。

  • System – 跟随操作系统或浏览器设置。

设置应用程序默认方案

默认情况下，应用程序使用浅色方案。在主应用程序类上通过 @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);
}