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

Question

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

Spring Boot应用程序Java 8
build.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