CSS theme question

Flow
1

I’m fiddeling with some custom css styling and I’m struggling with understanding the docs.

I added this to my styles.css file but the color of the Buttons with theme primary don’t update.

html {
    --spotbot-green: #00d0b1;
    --vaadin-button-primary-background: var(--spotbot-green);
}

I then added:

    vaadin-button[theme~="primary"] {
        background-color: var(--spotbot-green);
    }

When this was added the buttons updated the color correctly, but if I remove the --vaadin-button-primary-background: var(–spotbot-green); the color goes back to lumo style.

It seems wierd that I have to add both of this, so I guess I’m doing something wrong. Any pointers to what I’m missing here?

1 Like
2

I tested it locally and it works fine here.

What does your browser inspector tell you?