如何在vaadin10或自定义默认值(Lumo)中创建自定义主题

Question

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

Spring引导应用程序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/前端/。这个文件夹下的所有内容都可以通过前端// protocol在Java中访问。

向主题文件中添加内容

.shared：

<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