如何在 vaadin10 或自定義默認（lumo）中創建自定義主題

Question

我正在嘗試使用https://demo.vaadin.com/lumo-editor/創建自定義配置 vaadin lumo 主題。 但我在谷歌搜索，閱讀 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 中訪問。

將內容添加到主題文件

共享樣式.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