如何在 vaadin10 或自定义默认（lumo）中创建自定义主题

Question

我正在尝试使用 https://demo.vaadin.com/lumo-editor/ 创建自定义配置 vaadin lumo 主题。但是我在 Google 中搜索，阅读 Vaadin 官方文档，但还不明白我需要如何在我的项目中集成来自该站点的 .html 文件。请帮助我正确配置自定义主题。

Spring 启动应用程序 java 8
构建.gradle：

plugins {
    id 'org.springframework.boot' version '2.1.4.RELEASE'
    id 'java'
}

apply plugin: 'io.spring.dependency-management'

group = 'com.ua.pypek.myfirstvaadin'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
    mavenCentral()
}

ext {
    set('vaadinVersion', '10.0.13')
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'com.vaadin:vaadin-spring-boot-starter'
    runtimeOnly 'org.springframework.boot:spring-boot-devtools'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

jar{
    enabled = true
}

dependencyManagement {
    imports {
        mavenBom "com.vaadin:vaadin-bom:${vaadinVersion}"
    }
}

Answer 1

如果您当前的应用程序中没有主题，那么您需要创建一个主题 html 文件，并在您的应用程序入口点中说明使用它。

创建主题文件

创建文件 ./src/main/webapp/frontend/styles/shared-styles.html

主题文件位于 webapp 前端文件夹下。项目中的这个位置是 ./src/main/webapp/frontend/。此文件夹下的所有内容都可以通过 frontend:// 协议在 Java 中访问。

向主题文件添加内容

shared-styles.html：

<custom-style>
  <style>
    html {
      --lumo-primary-text-color: rgb(213, 22, 243);
      --lumo-primary-color-50pct: rgba(213, 22, 243, 0.5);
      --lumo-primary-color-10pct: rgba(213, 22, 243, 0.1);
      --lumo-primary-color: hsl(292, 90%, 52%);
    }
  </style>
</custom-style>

请参阅您的应用入口点中的新主题文件。

添加一个指向文件的@HtmlImport：

@HtmlImport("frontend://styles/shared-styles.html")
@Route("")
public class MainView extends VerticalLayout() {
  ...
}

就是这样

您可以在文档中找到更多信息：https://vaadin.com/docs/v13/flow/theme/theming-crash-course.html