you might want to start getting ready for it. 
it’s going to be the default in the near future.
I love this interface for Tasmota iFan02. Has anyone done any modifications to better support frontend colour themes? eg, setting the UI to any of the night time themes with dark backgrounds makes the fan speed buttons hard to read.
Thanks
as a matter of fact I have! 
I changed the following lines:
line 12: background-color:#546E7A;
line 65: this.btnOffstyle = ‘background-color: #42d9f4;’;
line 73: this.btnLowstyle = ‘background-color: #42d9f4;’;
line 81: this.btnMedstyle = ‘background-color: #42d9f4;’;
line 89: this.btnHighstyle = ‘background-color: #42d9f4;’;
I have “slate” as the theme and this is how mine looks now:
I can’t remember if I changed the theme at all tho so it might be a bit different.
Hi, but this is under the old frontend or under Lovelace?
that is from the old frontend…
I don’t think anyone has figured out how to adapt this to Lovelace yet.
But if anyone has it would sure be appreciated! 
Just as an FYI I piggybacked onto the work by another member to get a working functionally equivalent custom card to this component to use in Lovelace.
You can find the info needed in this post:
1 Like
Updated this from custom-ui to lovelace
Modified code from finity
Add this to your www/ folder called fan-control-row.js
class FanControlRow extends Polymer.Element {
static get template() {
return Polymer.html`
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
.speed {
min-width: 30px;
margin-left: 4px;
margin-right: 4px;
background-color: #d1d4d5;
border: 1px solid lightgrey;
font-size: 10px !important;
float: right !important;
}
</style>
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
<div class='horizontal justified layout' on-click="stopPropagation">
<paper-button
class='speed'
style='[[_highOnColor]]'
toggles name="high"
on-tap='setSpeed'
disabled='[[_isOnHigh]]'>HIGH</paper-button>
<paper-button
class='speed'
style='[[_medOnColor]]'
toggles name="medium"
on-tap='setSpeed'
disabled='[[_isOnMed]]'>MED</paper-button>
<paper-button
class='speed'
style='[[_lowOnColor]]'
toggles name="low"
on-tap='setSpeed'
disabled='[[_isOnLow]]'>LOW</paper-button>
<paper-button
class='speed'
style='[[_offColor]]'
toggles name="off"
on-tap='setSpeed'
disabled='[[_isOffState]]'>OFF</paper-button>
</div>
</hui-generic-entity-row>
`;
}
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged'
},
_config: Object,
_stateObj: Object,
_lowOnColor: String,
_medOnColor: String,
_highOnColor: String,
_offColor: String,
_isOffState: Boolean,
_isOnState: Boolean,
_isOnLow: Boolean,
_isOnMed: Boolean,
_isOnHigh: Boolean
}
}
setConfig(config) {
this._config = config;
}
hassChanged(hass) {
const config = this._config;
const stateObj = hass.states[config.entity];
let speed;
if (stateObj && stateObj.attributes) {
speed = stateObj.attributes.speed || 'off';
}
let low;
let med;
let high;
let offstate;
if (stateObj && stateObj.attributes) {
if (stateObj.state == 'on' && stateObj.attributes.speed == 'low') {
low = 'on';
} else if (stateObj.state == 'on' && stateObj.attributes.speed == 'medium') {
med = 'on';
} else if (stateObj.state == 'on' && stateObj.attributes.speed == 'high') {
high = 'on';
} else {
offstate = 'on';
}
}
let lowcolor;
let medcolor;
let hicolor;
let offcolor;
if (low == 'on') {
lowcolor = 'background-color: #03a9f4; color:black;';
} else {
lowcolor = '';
}
if (med == 'on') {
medcolor = 'background-color: #03a9f4; color:black;';
} else {
medcolor = '';
}
if (high == 'on') {
hicolor = 'background-color: #03a9f4; color:black;';
} else {
hicolor = '';
}
if (offstate == 'on') {
offcolor = 'background-color: #ffd1d4; color: #a0898b;';
} else {
offcolor = '';
}
this.setProperties({
_stateObj: stateObj,
_isOffState: stateObj.state == 'off',
_isOnLow: low === 'on',
_isOnMed: med === 'on',
_isOnHigh: high === 'on',
_lowOnColor: lowcolor,
_medOnColor: medcolor,
_highOnColor: hicolor,
_offColor: offcolor
});
}
stopPropagation(e) {
e.stopPropagation();
}
setSpeed(e) {
const speed = e.currentTarget.getAttribute('name');
this.hass.callService('fan', 'set_speed', {
entity_id: this._config.entity, speed: speed
});
}
}
customElements.define('fan-control-row', FanControlRow);
Activate in your ui-lovelace.yaml at the top in resources: section
url: /local/fan-control-row.js
type: js
Turn on the custom display for any fan entity
type: custom:fan-control-row
entity: fan.ge_12730_fan_control_switch_level_4
1 Like
Good day and well done on the great work. I have just migrated to Lovelace.
Where do I find the www folder ?
should be in the homeassistant home directory just called www
Thank You! Got it going
Just updated it so that if you’re using custom themes it will feed in the right colors. Instead of having the button colors hard coded.
1 Like
Nice. I like it.
But now I’m not sure if I like mine or yours better. I do kind of like the obvious on/off colors of mine though. 
But it’s good to have choices!
Gave ya credit in the first post. Also i decided to change to the color values to come from the theme less file so that it incorporates better with theming.
Yeah, I saw that. Thank you! No complaints at all. Sorry if it came across that way.
Hey - it seems something in 0.88 broke this. It displays but the buttons are not clickable. I think it is that paper-button has been remove; but replacing with mwc-button doesn’t solve it
I saw that warning but I haven’t updated to v88 yet. And I likely won’t for a few days at least. I like to let the dust settle on a new update before I take the plunge. I’ve got an updated version of the card ready to try as soon as I update.
In the meantime, @jwelter what does the dev console say (F12 in chrome)? Any errors?
Yes running Lovelace and it was working great on 87 release.
Hi, yes cleared cache and in the dev console no errors are thrown… Very odd.
If I dont have the ui-lovelace.yaml file where should I add this one ?
I am managing Lovelace from the GUI
Thanks