How to change theme primary color

Flow
1

Hello!

The solution might be obvious but I just can’t figure it out for now. I’m using Vaadin 12 Project Base with Spring and the Material theme. I want to change the purple main color to something else.

I have shared-styles.html in frontend://styles/shared-styles.html and it contains:

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

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

MainView looks like this:

@Route
@HtmlImport("frontend://styles/shared-styles.html")
@Theme(value = Material.class, variant = "light")
@StyleSheet("frontend://styles/styles.css")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class MainView extends VerticalLayout {
...

CSS styling works just fine. What I’m doing wrong? Is there a way to customize theme with styles.css only?

2

maatuZ .:
Hello!

The solution might be obvious but I just can’t figure it out for now. I’m using Project Base with Spring and the Material theme. I want to change the purple main color to something else.

I have shared-styles.html in frontend://styles/shared-styles.html and it contains:

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

<dom-module id="material-color-light">
    <template>
        <style>
            :host {
                --material-primary-color: [letgo.onl]

(https://letgo.onl/)var(–primary-color, #333333);

        }
    </style>
</template>
```

MainView looks like this:

@Route
@HtmlImport("frontend://styles/shared-styles.html")
@Theme(value = [kissanime.software]

(https://kissanime.software/)Material.class, variant = “light”)

@StyleSheet(“frontend://styles/styles.css”)
@Viewport(“width=device-width, [groupme.onl]
(https://groupme.onl/)minimum-scale=1.0, initial-scale=1.0, user-scalable=yes”)
public class MainView extends VerticalLayout {
…


CSS styling works just fine. What I'm doing wrong? Is there a way to customize theme with styles.css only?

I dont find anything wrong too but i too am an amature so need experts here.

Regards,
Shane.

3

Working now. I somehow had wrong import, so changing from

com.vaadin.annotations.HtmlImport;

to

com.vaadin.flow.component.dependency.HtmlImport;

did the trick.