How create custom theme in vaadin10 or custom default(lumo)

Question

I'm trying create custom configuration vaadin lumo theme with https://demo.vaadin.com/lumo-editor/. But i search in Google, reading Vaadin official documentation and don't understand yet how i need integrate .html file from this site in my project. Please help me with correct configuration custom theme.

Spring boot application 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

If you have no theme in your current application, then you need to create a theme html file and also say in your app entry point to use it.

Create theme file

Create the file ./src/main/webapp/frontend/styles/shared-styles.html

Theme files goes under the webapp frontend folder. The place in the project for this is ./src/main/webapp/frontend/. Everything under this folder is accessible in Java via the frontend:// protocol.

Add content to theme file

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>

Refer to the new theme file in your app entry point.

Add a @HtmlImport pointing to the file:

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

That's it

You can find more information in the documentation: https://vaadin.com/docs/v13/flow/theme/theming-crash-course.html