Lovelace: Dark Thermostat (BETA)

Dark Thermostat (BETA)

A round thermostat card.



type: custom:thermostat-dark-card
entity: climate.ecobee


Install the card using HACS

Buy Me A Coffee if you like the cards so much that wish to express your gratitude.


Thank you for this, excited for updates. Working great in my setup, just have to add a switch above in order to toggle operation mode. I think just tapping on value in middle to toggle cool/off would work great. Been watching for this on your github for a while.

Thanks again.

A panel is in the works to allow flexible services to be added. From operation mode to fan and swing mode.

1 Like

I need to integrate a thermostat


Hi, i have this error:

2018-08-09 08:51:55 ERROR (MainThread) [frontend.js.latest.201808040] https://XXX.XXX.XXX:PORT/local/custom-lovelace/thermostat-card/thermostat-card.js?v=1:14:27 Uncaught TypeError: Cannot read property ‘state’ of undefined

this is my ui-lovelace.yaml:

  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
    type: module

  - icon: mdi:home-assistant
    title: Second view
        - type: custom:thermostat-card
          title: Bedroom
          entity: climate.ecobee

Please use code blocks when posting your code (see the banner at the top of the page), this will make it easier for folks to find what’s wrong. Formatting is key.

This is what mine looks like:

    - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.0.2
      type: module
    - type: custom:thermostat-card
      chevron_size: 100
      step: 1
      highlight_tap: true
      no_card: true
          'Off': 'off'
          'Cooling': 'cool'
          'Heaing': 'heat'
        attribute: operation_mode

Hi, sorry for my latest post.

I copy your code and i have this error:

2018-08-10 10:18:37 ERROR (MainThread) [frontend.js.latest.201808040] https://XXX.XXX.XXX:PORT/local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.0.2:12:27 Uncaught TypeError: Cannot read property ‘attributes’ of undefined

I have home assistan into raspberry with raspbian

EDIT: Solved.

Can this card also be used for a Netatmo thermostat?

It is usable for any thermostat that roughly implements a climate component interface. If you try it and see anomalies, please raise issues against: and I’ll try to assist.

1 Like

Oké, after my holidays I will try your card. Looks very nice!

@ciotlosm Amazing! This is going to get me to waste my weekend to switch everything over to lovelace! For that, you owe me! lol jk

Not sure if I know how to use this card properly. Is there a trick to get the HVAC modes to show?
And is there a way to show the setpoints in white on the dial like in the demo picture?
Below is my card.

My Ecobee shows blue face when in cooling mode (orange? in heat) and black when off.

[edit] One request I have is for something on the dial to change color when in different operations, for example,
blue dial face when operation_mode is set to cool, turns number green when operation=cool, yellow when operation=fan, white when idle.
orange dial face when operation_mode is set to heat, turns number red when operation=heat, yellow when operation=fan, white when idle.
Thank you for the great work.


I did try this now for my heat pump controlled by Sensibo/Melcloud. Is just black all the time, does not change to blue or orange when cooling/heating. But it works.

Heaing is a typo? :stuck_out_tongue:

1 Like

I’m having a problem with using the card because every time i click it (doesn’t matter where) it brings up my climate entity in a window instead of letting me control it through the card. Anyone have any ideas?

1 Like

@Picnic HVAC modes will not show in the current card version. You could have an attributes custom card stacked with vertical-stack to show missing info underneath. HVAC modes are coming in the next version of the thermostat card.

The setpoints in white are only visible when the thermostat has to do work. For example if you have 18-25 setpoints and current temperature is 22, your thermostat won’t either heat or cool. This is also true for thermostat in heating mode when temperature is higher than setpoint. I chose to do this to allow easier visual cue when thermostat is doing something and where is trying to push the temperature.

@JTPublic I think the blue, orange and black will remain. If you want to see operation mode that will arrive in a future version as on options screen (people don’t change that often operation mode). For the Fan I might include a fan mode show on the main screen to show when a fan is active (similar to away leaf).

@Dennis87 The current implementation uses state to detect the type of running state but you can adjust which attribute is uses for the heat/cool/off/idle etc from the settings. You can also specify custom value, and yes my example contained a typo. You can use dev-info panel to determine exactly how your thermostat reports the state and have it match.

@plz Can you please make a screenshot of the problem? Or maybe a video? I haven’t seen this behaviour and I can’t suggest solutions unless I understand how it behaves.

Eagerly watching this…

Is there any chance to support in future a different entity that can be used for the current room temperature ?

I use MaxEQ3 radiator valves, but they only report current temperature when the valve position moves, so it’s an unreliable reading.
I have temperature sensors in each room to counter this, so would be great to integrate the two into a single thermostat - setpoint/current temp view…

@swifty that can be done easily. Please use the repository to open an issue for this request. If possible with an example. I’ll get to this as well, as it’s quite an easy change :slight_smile:

1 Like