Hello,
I use Vaadin Flow RC5 and Spring Boot 2. I have Push activated.
I want change the CSS styles for background-color
and color
in my application. I try it with the following code inside my Polymer template:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="custom-element-template">
<style>
:host {
--custom-background-color: #4CAF50;
--custom-color: #ffffff;
}
.changebleTheme {
background-color: var(--custom-background-color);
color: var(--custom-color);
}
</style>
<template>
<div class="changebleTheme" style="width: 100%; height: 100%; border: 1px solid lightgrey;">
</div>
</template>
<script>
class CustomElementTemplate extends Polymer.Element {
static get is() {
return 'custom-element-template';
}
changeTheme() {
this.updateStyles({
'--custom-background-color': '#4CAF50',
'--custom-color': '#ffffff',
});
}
}
customElements.define(CustomElementTemplate.is, CustomElementTemplate);
</script>
</dom-module>
on Java side I call the following code inside my Java template implementation:
getElement().callFunction("changeTheme");
This is only an example!
My problem now is, that all is working fine in Firefox, but not in Safari or Chrome.
Can anyone help me out?
Greetings!