Flow - Theming for Beginners?

Flow
1

Hello,

first a small disclaimer: I’m more of a backend Java programmer and have no idea about CSS and Web Components and the like. Though I’ve tried to go through the official documentation on theming as well as some forum posts it all left me more confused than anything.

Vaadin version: 13.0.11 in combination with Spring Boot 2.0.5.RELEASE

What I’m trying to do: After building an initial layout, I’d like to alter the Lumo theme’s colours (mainly the text and button colours) to be more in line with our company’s colour scheme. We’re using a range of Vaadin buttons, labels, upload components, grids, and tabs so a generic approach is required.

Problem: Aside from an approach involving getStyle().set(“colour”, “#123456”), I wasn’t able to get anything to work. Meaning, no imported CSS or HTML file had any effect on the colour scheme of my application. Part of the problem is that I don’t know how I could debug HTML-imports and CSS and the like, so I don’t know if my shared-styles.html contains errors or is even read at all.

What I’ve tried: Aside from said programmed approach using getStyle().set(…), I have tried to create a shared-styles.html which I’ve put in my project in \src\main\webapp\frontend\styles. Based on my limited understanding, this should replace the primary colour with some green tone:

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/vaadin-lumo-theme/color.html">

<dom-module id="lumo-color-light">
    <template>
        <style>
            :host {
                --lumo-primary-color: var(--primary-color, #007749);
            }
        </style>
    </template>
</dom-module>

My MainView looks like this:

...
@HtmlImport("frontend://styles/shared-styles.html")
@Theme(Lumo.class)
public final class MainView extends VerticalLayout {
...

However, absolutely nothing changes when I view my application. It’s still in vanilla Lumo colours and I have no idea where it went wrong.

What would really help me: A comprehensive tutorial which explains what files to create where and what annotations or commands to run on components in detail. Most stuff I find on the web regarding theming shows only small snippets and pieces of information but I haven’t found a step-by-step walkthrough or even functioning example.

2

Thanks for the detailed feedback. Can you please share what is unclear with the current theming documentation?
https://vaadin.com/docs/v13/flow/theme/theming-crash-course.html

Also, regarding web components theming - Lumo editor is the easiest way to customize colors:
https://demo.vaadin.com/lumo-editor/

Note, if you check it’s output, you will see that the generated code uses <custom-style>:

<custom-style>
  <style>
	html {
	  --lumo-primary-text-color: rgb(22, 26, 243);
	  --lumo-primary-color-50pct: rgba(22, 26, 243, 0.5);
	  --lumo-primary-color-10pct: rgba(22, 26, 243, 0.1);
	  --lumo-primary-color: hsl(239, 90%, 52%);
	  --lumo-error-text-color: rgb(212, 56, 255);
	  --lumo-error-color-50pct: rgba(212, 56, 255, 0.5);
	  --lumo-error-color-10pct: rgba(212, 56, 255, 0.1);
	  --lumo-error-color: hsl(287, 100%, 61%);
	}
  </style>
</custom-style>

There is one important difference between <custom-style> and <dom-module>:

  1. <custom-style> should be used for global styles only, including CSS custom properties.
  2. <dom-module> can be used for one of the two purposes:
  • with theme-for: style module for individual Vaadin components,
  • without theme-for: reusable style module, to be included in other modules.

Hope this helps. We will do our best to improve the documentation.

3

Thank you so much. That editor is pure gold! Not sure how I could miss that. I guess what bothered me with the documentation (and implementation) was:

  • There are a lot of code snippets but it’s often not explained what they actually do.
  • The documentation mentions a few ways how to affect the frontend, like Java code, CSS, Polymer (whatever that is), CSS in HTML (what is even the difference to regular CSS), or creating a custom Theme Java class. To me, a frontend noob, it wasn’t made clear whether these are all alternatives or somewhat complementary to each other. Or for what use case which is best.
  • I would have loved to see a small step-by-step tutorial or example code where the user is walked through what files to create where. Ideally, for each of the alternative(?) ways to customise the styling.
  • Much of the time I spent debugging was on trying to figure out where this shared-styles.html file had to go in order to be found by Vaadin / the browser. Also, since the browser simply ignores a missing or incorrect .html file on @HtmlImport, some form of log output or error would be good. I mostly had no clue what I did wrong and why it wouldn’t pull the colours set in the file. So it was the worst kind of trial and error. Maybe that’s easier for someone with more experience in web UI development, I don’t know.

For reference my now working implementation below. I had some trouble at first making it work with maven packaging as .jar. Turns out, the shared-styles.html has to go into META-INF and not webapp if intended to be deployed as .jar and not .war.

Anyway, my shared-styles.html in src/main/resources/META-INF/resources/frontend/styles:

<link rel="import" href="bower_components/polymer/polymer-element.html">

<custom-style>
  <style>

	html {
	  --lumo-primary-text-color: rgb(0, 119, 73);
	  --lumo-primary-color-50pct: rgba(0, 119, 73, 0.5);
	  --lumo-primary-color-10pct: rgba(0, 119, 73, 0.1);
	  --lumo-primary-color: rgb(0, 119, 73);
	}
	
	[theme~="dark"]
 {
	}

  </style>
</custom-style>

And in my MainView:

...
@Theme(Lumo.class)
@HtmlImport("frontend://styles/shared-styles.html")
public final class MainView extends VerticalLayout {
...

Now works both from Eclipse as well as the built .jar. Thank you again!

4

I created a “tutorial” where I tried to gather the most commonly needed things regarding themes and styling in Vaadin, as that info is quite scattered at the moment.

https://www.notion.so/vaadin/Themes-and-Styling-in-Vaadin-a72d68eeafe341549c7adfcccdf5a951

It’s not a step-by-step in the sense that I assume Janek wished for, but it should contain at least one way of accomplishing the common use cases.

Disclaimer: this is the first iteration which might contain some factual and implementation errors.

We’re also planning on improving the official documentation, but that’s going to take a little more time, so I wanted to provide something sooner than later.

5

That looks quite on point. Certainly, a good start. Thank you, Jouni!

6

Please revise the documentation. I’ve seen it gettin more confusing every interation.

Notion post is not available :confused: