Vaadin Lumo 暗色主题与自定义主题的集成与覆盖实践-java教程-PHP中文网

Vaadin Lumo 暗色主题与自定义主题的集成与覆盖实践

花韻仙語

发布： 2025-10-13 09:15:00

原创

338人浏览过

Vaadin Lumo 暗色主题与自定义主题的集成与覆盖实践

本文详细介绍了如何在vaadin应用中将lumo暗色主题设置为基础，并通过自定义主题进行局部样式覆盖。通过在`@theme`注解中指定`variant="dark"`，并利用css选择器`[theme~="dark"]`在自定义主题的`styles.css`文件中精确修改lumo变量和组件样式，实现暗色主题的定制化，从而构建既符合lumo暗色风格又具有个性化设计的vaadin应用。

Vaadin主题机制概述

Vaadin框架提供了强大的主题定制能力，允许开发者通过Lumo主题快速构建美观的用户界面，并通过自定义主题进一步实现个性化设计。Lumo主题本身支持“亮色”（light）和“暗色”（dark）两种变体。在实际开发中，我们常常希望以Lumo暗色主题为基础，然后针对特定组件或全局变量进行微调，以满足项目的设计需求。

通常，Vaadin应用的主题通过在主视图类或UI类上使用@Theme注解来指定。例如，@Theme("myTheme")会指示Vaadin加载名为myTheme的自定义主题。然而，要将Lumo暗色主题作为基础并进行覆盖，仅仅指定自定义主题名称是不够的，还需要明确激活Lumo的暗色变体。

激活Lumo暗色主题变体

要将Lumo暗色主题作为应用程序的基础主题，最直接且推荐的方式是在@Theme注解中明确指定variant = "dark"。这将确保Vaadin加载Lumo暗色主题的默认样式。

以下是一个示例，展示如何在Vaadin应用程序中激活Lumo暗色主题，并同时指定一个自定义主题（例如app-theme）来承载我们的个性化样式：

import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo; // 导入Lumo主题类

@Theme(value = "app-theme", variant = Lumo.DARK) // 指定自定义主题并激活Lumo暗色变体
public class AppShell implements AppShellConfigurator {
    // 可以在这里添加其他AppShell配置
}

登录后复制

在上述代码中，@Theme(value = "app-theme", variant = Lumo.DARK)表示我们的应用程序将使用名为app-theme的自定义主题，并且该主题将基于Lumo的暗色变体。

自定义主题样式覆盖

激活Lumo暗色主题后，我们可以在app-theme主题内部的styles.css文件中进行样式覆盖。Vaadin的Lumo主题大量使用了CSS自定义属性（CSS Variables），这使得覆盖特定样式变得非常简单。

为了确保我们的自定义样式只在暗色主题变体下生效，我们需要使用CSS选择器[theme~="dark"]。这个选择器会匹配所有具有theme="dark"属性的元素，而Vaadin在激活Lumo暗色变体时，会在<html>元素上添加theme="dark"属性。

假设我们的自定义主题位于frontend/themes/app-theme/目录下，我们可以在frontend/themes/app-theme/styles.css文件中添加以下内容来覆盖Lumo暗色主题的默认变量：

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

查看详情

/* frontend/themes/app-theme/styles.css */

/* 全局Lumo变量覆盖，仅在暗色主题下生效 */
[theme~="dark"] {
    /* 覆盖基础背景色 */
    --lumo-base-color: hsl(210, 10%, 15%); /* 比Lumo默认暗色更深的背景 */

    /* 覆盖主色调 */
    --lumo-primary-color: hsl(170, 80%, 40%); /* 改变默认的蓝色为主绿色 */
    --lumo-primary-color-50pct: hsla(170, 80%, 40%, 0.5);
    --lumo-primary-color-10pct: hsla(170, 80%, 40%, 0.1);

    /* 覆盖文本颜色 */
    --lumo-body-text-color: hsla(210, 100%, 95%, 0.9); /* 调整正文文本颜色 */
}

/* 针对特定组件的样式覆盖，例如Button */
vaadin-button[theme~="dark"] {
    /* 覆盖按钮的背景色 */
    background-color: var(--lumo-primary-color);
    /* 覆盖按钮的文本颜色 */
    color: var(--lumo-primary-contrast-color);
    /* 移除边框 */
    border: none;
}

/* 如果要覆盖所有按钮的默认样式，可以不使用[theme~="dark"]，但那样会影响亮色主题 */
/* vaadin-button {
    border-radius: 8px;
} */

登录后复制

在上述示例中：

我们通过[theme~="dark"]选择器，针对<html>元素（或任何被标记为theme="dark"的元素）定义了新的Lumo CSS变量值。这会影响所有使用这些变量的Vaadin组件。
我们还展示了如何针对特定的Vaadin组件（如vaadin-button）在暗色主题下进行样式覆盖。

复制Lumo暗色变量作为基础

如果希望对Lumo暗色主题进行大规模的自定义，并且需要确保所有Lumo变量的计算都从一个已知的基础开始，可以考虑将Lumo暗色主题的所有CSS变量定义复制到你的自定义主题的styles.css文件中。

原始Lumo暗色主题的变量定义通常如下所示（这部分内容已在问题描述中提供）：

/* frontend/themes/app-theme/styles.css */
html[theme~="dark"] { /* 注意这里使用html[theme~="dark"]以确保在根元素生效 */
    /* Base (background) */
    --lumo-base-color: hsl(214, 35%, 21%);

    /* Tint */
    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
    /* ... 复制所有Lumo暗色变量定义 ... */

    /* Primary */
    --lumo-primary-color: hsl(214, 90%, 48%);
    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
    /* ... 复制所有Lumo暗色变量定义 ... */
}

/* 在此之后，你可以继续添加你自己的覆盖样式 */
vaadin-button[theme~="dark"] {
    background-color: var(--lumo-primary-color); /* 此时会使用你上面定义的--lumo-primary-color */
    /* ... */
}

登录后复制

注意事项：