如何将Vaadin 24默认深色主题从深蓝改为纯黑？

Vaadin 24的主题基于Lumo框架，要把默认深蓝色的深色主题改成纯黑，只需定制Lumo的CSS变量即可，具体操作如下：

1. 创建/修改主题样式文件 #

在项目的frontend/themes/[你的主题名称]/styles.css路径下（若目录或文件不存在，直接创建即可），添加以下CSS代码：

/* 覆盖Lumo深色主题的核心颜色变量 */
[data-theme="dark"] {
  --lumo-base-color: #000000;
  --lumo-shade: #000000;
  --lumo-shade-5pct: rgba(0, 0, 0, 0.05);
  --lumo-shade-10pct: rgba(0, 0, 0, 0.1);
  --lumo-shade-20pct: rgba(0, 0, 0, 0.2);
  --lumo-shade-30pct: rgba(0, 0, 0, 0.3);
  --lumo-shade-40pct: rgba(0, 0, 0, 0.4);
  --lumo-shade-50pct: rgba(0, 0, 0, 0.5);
  --lumo-shade-60pct: rgba(0, 0, 0, 0.6);
  --lumo-shade-70pct: rgba(0, 0, 0, 0.7);
  --lumo-shade-80pct: rgba(0, 0, 0, 0.8);
  --lumo-shade-90pct: rgba(0, 0, 0, 0.9);
}

2. 确认主题配置正确性 #

检查frontend/themes/[你的主题名称]/theme.json文件，确保已引入Lumo的必要模块：

{
  "lumoImports": ["typography", "color", "spacing", "utility"]
}

3. 启用深色主题 #

在应用的入口组件（比如MainLayout.java或MainView.java）中，添加启用深色主题的逻辑：

@Route(value = "", layout = MainLayout.class)
@PageTitle("我的应用")
public class MainView extends VerticalLayout {
    public MainView() {
        // 默认启用深色主题
        UI.getCurrent().getElement().setAttribute("data-theme", "dark");

        // 可选：添加主题切换按钮
        Button toggleBtn = new Button("切换主题", e -> {
            Element uiElement = UI.getCurrent().getElement();
            String currentTheme = uiElement.getAttribute("data-theme");
            uiElement.setAttribute("data-theme", "dark".equals(currentTheme) ? "light" : "dark");
        });
        add(toggleBtn);
    }
}

关键说明 #

• --lumo-base-color是Lumo主题的核心背景色变量，设置为#000000就能将主背景改为纯黑。
• 同步覆盖--lumo-shade系列变量，是为了让阴影、边框、半透明遮罩等衍生样式适配纯黑背景，避免出现视觉不协调的问题。
• 如果仅需快速修改主背景，单独设置--lumo-base-color和--lumo-shade两个变量也能达到基本效果，但完整覆盖变量会让整体主题风格更统一。

内容的提问来源于stack exchange，提问作者Ben