maatuZ
(maatuZ .)
December 14, 2018, 5:59pm
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?
Shane22
(Shane Pierce)
December 14, 2018, 6:14pm
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.
maatuZ
(maatuZ .)
December 15, 2018, 12:16pm
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.