Vaadin custom css - customizing themes

Question

I'm having an issue with using custom theme. I'm using Spring Boot + Vaadin 8 and IntelliJ Idea + Gradle. I've created a file: src/main/webapp/VAADIN/themes/mytheme/styles.css

@import "../valo/styles.css";
.my-split { background: #a983ff; }

I've added @Theme("mytheme") to my UI class.

I've set the style name on my component: gridsSplitPane.addStyleName("my-split");

And now when I run my app it seems that the mytheme gets loaded because the background is changed correctly but everything else has no CSS styling - as if the import didn't work: @import "../valo/styles.css"

What am I missing here?

I've seen some information that a theme needs to be compiled somehow. Can anyone help me to compile it with Gradle + IntelliJ Idea? Is it also required for plain css customizations like mine?

When I use @Theme("valo") instead - everything is loaded correctly, so I'm guessing that all the Valo theme files are loaded correctly from: vaadin-themes-8.1.0.jar!/VAADIN/themes/valo/...

build.gradle

buildscript {
    ext { springBootVersion = '1.5.6.RELEASE' }
    repositories { mavenCentral() }
    dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") }
}

apply plugin: 'java'
apply plugin: 'org.springframework.boot'

version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories { mavenCentral() }

ext { vaadinVersion = '8.1.0' }

dependencies {
    compile('com.vaadin:vaadin-spring-boot-starter')

    compile("org.springframework.boot:spring-boot-starter-logging")
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

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

AppMain.java

package example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AppMain {
    public static void main(String[] args) {
        SpringApplication.run(AppMain.class, args);
    }
}

MyUI.java

package example;

import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
@SpringUI(path = "/ui")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
        Label label = new Label("Customizing theme.");
        label.setStyleName("my-label");

        VerticalLayout root = new VerticalLayout();
        root.addComponent(label);
        root.setSizeFull();
        setContent(root);
    }
}

Answer 1

Here a quick tutorial

"How to use a custom theme with Vaadin 8 and SPRING boot application"

1. Create a Vaadin Application with Spring BOOT, sbt, SCALA and Vaadin8

2. Create a new Vaadin application using maven archetype

Maven -> [x] Create from archetype -> com.vaadin:vaadin-archetype-application -> vaadin-archetype-application:8.0.0

3. Copy vaadin custom theme from maven archetype app to your SPRING Vaadin 8 app:

Copy entire VAADIN directory (src/main/webapp/VAADIN/themes/mytheme)

to

src/main/resources/VAADIN/themes/mytheme

4. Change

@Theme("mytheme") public class MyUI extends UI { }

5. [OPTIONAL] Change the name of the theme to your liking

Rename:

VAADIN/themes/mytheme/mytheme.scss -> othertheme.scss
VAADIN/themes/mytheme/mytheme.scss -> change mixin name @mixin othertheme { ... }
VAADIN/themes/mytheme/styles.scss -> change @import "othertheme.scss" | .othertheme{} | @include othertheme;

More info in these screencasts:

video Introduction to Vaadin - Your first application with Framework 8

video Community Answer: Creating new Vaadin Themes in Spring Applications

Answer 2

You were close to get it working. To use a custom SCSS theme, put the following in the styles.scss:

@import "../valo/valo";

.mytheme {
    @include valo;
}

The basic difference with the content you mentioned in the comments is the way to include Valo in your theme.

EDIT

Your original question was about CSS theme. As far as I can see, CSS themes shouldn't work with including Valo because most styles are prefixed with .valo CSS selector and switching to your custom theme will add the CSS class mytheme instead of default valo to the main div element. I even tested to add the valo CSS class in the final HTML (Firefox inspector) which then shows styles as expected. Feels like a Vaadin bug. So, I recommend using SCSS themes which also have more features than CSS.