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: