Change stroke width in thermostat card

Configuration Frontend
1

Hi,

I use the thermostat card for my heating.
Visually, I do not quite like it.
Especially the thickness of the line in the circle (I hope you know what I mean) is too thin for me.
I am talking about the 3/4 circle to control the temperature and the point on this line.
I would like to set the thickness of the line to 10 and the dot to 24, but I don’t know how.
I have identified the corresponding CSS elements by chrome and web-inspector.
CIRCLE:

.slider {
  stroke-width: var(--round-slider-path-width, 3);
}

DOT:

path[Attributes Style] {
  vector-effect: non-scaling-stroke;
  d: path("M -0.92388 -0.382683 L -0.92288 -0.381683");
  stroke-width: 12;
}

Then I installed “lovelace-card-mod” and tried to access the CSS elements with it.
Unfortunately without success. The mod works, I can see that by the fact that I can change e.g. the font, but unfortunately not the stroke-width of the circle and the dot.
Does anyone have an idea how I can change these two elements?

2

Has nobody any idea?

3

I have tried it with card-mod.js , but apparently I cannot access the relevant elements.
This is really frustrating

4

I just learnt this right now and oh boy it makes a difference…

type: thermostat
entity: climate.home
name: ' '
card_mod:
  style: |
    ha-card {
      --round-slider-path-width: 30px;
    }

image
image976×494 21.5 KB

2 Likes
5

I love it! Do you happen to know how to change the “ball” size and color for the slider?

6

The climate dialog has been renewed in 2023.9 and this is no longer necessary.

image
image677×761 26.2 KB

In 2023.10 that same design is also in the climate card

7

The new design is only visible after you click the “three dots” on the climate card. Until then, you still see the original (less attractive) layout that is the subject of this thread. But I believe they are looking at changing this so the new improved design will get applied to the default/initial view as well? I certainly would love to see that!

8

You’re right. I don’t know why I thought that was already the case - it must have been something else although I’m sure it’s just a matter of time.

Read the comments in this thread for a few alternatives that should solve your needs: Reddit - Dive into anything