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.