Help needed with thermostat card theme edit

Icarus81 · February 23, 2024, 2:21pm

Help needet with a couple of color settings in theme creation:

I am struggeling with creating my first theme (based on another theme).

I need help with identifying some specific variables:

What are the variables called controlling the colors of the thermostat card dial (including the background color of the dial - please seee issue as described in my reply below)?

What are the variables called controlling the outline of the buttons on the alarm panel card?

Is there a complete usermade explainatory list someswhere explaining what all the variables control?

Thank you

tom_l · February 23, 2024, 2:33pm

github.com

home-assistant/frontend/blob/35ebfc15c9da2758540534192bb778d744aa4d3b/src/resources/ha-style.ts

import { css, unsafeCSS } from "lit";
import { fontStyles } from "./roboto";
import {
  DEFAULT_ACCENT_COLOR,
  DEFAULT_PRIMARY_COLOR,
  derivedStyles,
} from "./styles-data";

const mainStyles = css`
  /*
    Home Assistant default styles.

    In Polymer 2.0, default styles should to be set on the html selector.
    (Setting all default styles only on body breaks shadyCSS polyfill.)
    See: https://github.com/home-assistant/home-assistant-polymer/pull/901
  */
  html {
    font-size: 14px;
    height: 100vh;

This file has been truncated. show original

Icarus81 · February 24, 2024, 12:40pm

Thank you.

I read trough this before posting, as i am on al steep learning curve regarding themes.

However i am struggeling to understand what some of the variables change when applied. Some are obvious, some i just dont understand, as i see no change in my interface when applied.

My currently most annoying issue is, regarding my thermostat cards, which have some milky overlay compared to the standard HA dark mode. Seems the same issue with all the darker themes i have applied. -Where do i ajust that?

HA default dark mode:
Screenshot 2024-02-24 at 13-21-34 Oversigt – Home Assistant

Other themes:
Screenshot 2024-02-24 at 13-22-22 Oversigt – Home Assistant

tom_l · February 24, 2024, 9:02pm

No idea sorry. I’ve never heard of an “overly” being applied.

Check these variables in your custom themes:

climate colours

state-climate-auto-color: 
state-climate-cool-color: 
state-climate-dry-color: 
state-climate-fan_only-color:
state-climate-heat-color:
state-climate-heat-cool-color:

off colour

state-inactive-color:

text colour:

primary-text-color:

tom_l · February 25, 2024, 10:27pm

Also the opacity setting in this variable might have an effect:

card-background-color:

Skyler-xiao · May 17, 2025, 9:10am

hey
i used that in my theme but it isnt woring still the defult orange color
what the mistake?

      #climetic
      state-climate-auto-color: var(--main)
      state-climate-dry-color: var(--main)
      state-climate-fan_only-color: var(--main)
      state-climate-heat-color: var(--main)
      state-climate-heat-cool-color: var(--main)
      state-inactive-color: var(--off)

tom_l · May 17, 2025, 9:35am

Well for a start it is a year old post, things change rapidly around here. Though in this case the theme variables have not changed.

How are these variables defined:

Skyler-xiao · May 17, 2025, 10:59am

thanks for your fast reply
i have set colors

main: rgb(0, 255, 157)
off: rgba(255, 255, 255, 0.64)

Skyler-xiao · May 18, 2025, 12:37pm

thats my theme:

custom_theme:
  modes:
    dark:
      #var
      main: rgb(0, 255, 157)
      second: rgba(157, 0, 255, 0.52)
      black: rgba(0, 0, 0, 1)
      bg_dark: rgba(10, 10, 10, 0.8)
      bg: rgba(10, 10, 10, 0.4)
      off: rgba(255, 255, 255, 0.64)

      primary-color: var(--main)
      accent-color: var(-second)
      state-icon-color: var(--off)
      state-icon-active-color: var(--main)
      rgb-state-icon-color: var(--main)
      rgb-state-icon-active-color: var(--main)

      # Cards
      card-background-color: var(--bg_dark)
      paper-listbox-background-color: var(--black)
      ha-card-border-radius: 20px
      ha-card-background: var(--bg)
      paper-card-background-color: var(--bg)
      rgb-card-background-color: var(--black)
      ha-card-border-width: 0

      #header
      app-header-background-color: var(--black)
      more-info-header-background: var(--black)

      # Sliders
      paper-slider-knob-color: var(--main)
      paper-slider-knob-start-color: var(--main)
      paper-slider-pin-color: var(--main)
      paper-slider-active-color: var(--main)
      paper-slider-secondary-color: var(--second)

      #climetic
      state-climate-auto-color: var(--main)
      state-climate-dry-color: var(--main)
      state-climate-fan_only-color: var(--main)
      state-climate-heat-color: var(--main)
      state-climate-heat-cool-color: var(--main)
      state-inactive-color: var(--off)

Yoru · September 5, 2025, 10:09pm

for anyone stumbling across this in the future:
the quations marks are missing
state-climate-auto-color: "var(--primary-color)"
worked in my setup