Custom Theme by using .css

Flow
1

Hello Community,
i implemented a small vaadin project. I use a custom layout as content in myUI.class

CustomLayout content = new CustomLayout("index");
        setContent(content);

My Index.html consist only a small headline “h1”.

I want to change the color from my headline in mytheme. i want to import a custom css file.
Is there an opportunity to import a css file in mytheme.scss. I need a solution to customize my index.html.

@import "../valo/valo.scss";
@import "website/src/webapp/VAADIN/themes/mytheme/website.css

@mixin mytheme {
  @include valo;


}
2

Usually you write the css inline to that mixin, below @include valo. You can import here a SCSS file if you so want, if you modify website.css to a scss file and add also a @include website then within the mixin.

If you really want to include a plain, separate CSS file, you have to do it in styles.scss. SCSS does not allow importing CSS files in nested files (while SCSS is allowed). So move that @import "website/src/webapp/VAADIN/themes/mytheme/website.css into styles.scss (instead of mytheme.scss) and put it to the very first line, before the other imports. Then it should work.

3

Hi,

Just to complement the previous answer, you can take a look at the
vaadin docs for creating and using themes
 which explain in great detail how things should be done.

Hope this helps,
Goran