CODEWITHSUNDEEP
cssintellij-ideavaadin7
JohnnSzm
JohnnSzm

Reputation: 33

Can't use a custom theme in my vaadin project

I want to do some minor styling in to my app and so I tried to create a custom theme. I'm using IntelliJ Idea as an IDE for this project.

I've set my theme in folder: web/VAADIN/themes/mytheme/styles.css I've also copied valo theme from jar to themes folder ( not sure if needed )

I've following css-code in mytheme/styles.css file:

@import "../valo/styles.css";

.blackColor {
background: black;
}

In my UI, I've tried to use setTheme("mytheme"); in init method and annotation before the class.

The result is, I can apply the .blackColor just fine to components but it completely forgets the valo theme. It's like my custom theme is the only css file that is in use. What should I do?

Upvotes: 2

Views: 1751

Answers (1)

Morfic
Morfic

Reputation: 15508

If this is your first take on vaadin themes, you should take a look at the book section on themes and the valo - getting started wiki page. You will see that it is not necessary to copy the theme from the jars, you just need to inherit / extend it.

Suppose you're going by the example in the book, you'll have a mytheme.scss with your styles:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  .blackColor {
    background: black;
  }
}

And the styles.scss

@import "mytheme.scss";


.mytheme {
  @include mytheme;
}

After this, simply annotate your UI with the theme's name:

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

As per the book, please be aware that

If no styles.css exists in the folder, the Sass file is compiled on-the-fly when the theme is requested by a browser.

Note: you can find some nice examples of customizing the valo variables here.

Upvotes: 2

Related Questions