Figured I would share an idea I had to use card_mod to change how Simple Thermostat looks and use the rgb background color from the outside temp (I have a rgb light that changes color based on the outside temp), which is a separate automation for those interested.
- Mark
card_mod:
style: >
/* Extract RGB attributes with fallbacks if light is off/null */
{% set rgb = state_attr('light.weather_light_lifx', 'rgb_color') or [255, 119, 0] %}
{% set r = rgb[0] %} {% set g = rgb[1] %} {% set b = rgb[2] %}
/* 1. Global typography, scale, & card background overrides */
ha-card {
font-family: var(--primary-font-family, inherit) !important;
color: var(--primary-text-color) !important;
/* Map simple-thermostat CSS variables */
--st-font-size-title: var(--ha-card-header-font-size, 1.7rem) !important;
--st-font-size-xl: 1.7rem !important;
--st-font-size-m: var(--paper-font-subhead_-_font-size, 0.9rem) !important;
--st-font-size-sensors: var(--paper-font-caption_-_font-size, 2.0rem) !important;
/* Force native layout dimensions */
--st-mode-active-color: #ffffff !important;
--st-mode-color: #ffffff !important;
--st-spacing: 2px !important;
}
/* 2. Brute-force override all text elements, labels, and state values */
ha-card * {
font-family: var(--primary-font-family, inherit) !important;
}
/* 3. Force 'Currently', 'State', and row labels to HA standard caption size */
ha-card .st-label, ha-card [class*="label"], ha-card td.name {
font-size: var(--paper-font-caption_-_font-size, 1.1rem) !important;
color: var(--secondary-text-color) !important;
}
/* 4. Force 'Currently', 'State', and sensor values to HA body text size */
ha-card .st-value, ha-card
[class*="value"]:not([class*="target"]):not([class*="current"]), ha-card
.st-sensor__value {
font-size: var(--paper-font-subhead_-_font-size, 1.10rem) !important;
color: var(--primary-text-color) !important;
}
/* 5. TARGET TEMPERATURE SETPOINT NUMBER ONLY */
ha-card .st-target-temperature, ha-card .st-target-value, ha-card .target_value,
ha-card .current--target {
font-size: 3.6rem !important;
line-height: 3.6rem !important;
}
/* 6. EXTRA LARGE STEPPER BUTTONS & ARROWS */
ha-card ha-icon-button,
ha-card [class*="stepper"] ha-icon, ha-card [class*="stepper"]
ha-icon-button, ha-card [class*="stepper"] {
--mdc-icon-button-size: 64px !important;
--mdc-icon-size: 3.2rem !important;
margin: 4px 8px !important;
}
/* 7. COLOR THE COLUMNS DIFFERENTLY (RGB BOX) */
/* COLUMN 1 (Odd items / Left side): Transparent */
ha-card .st-body > *:nth-child(odd), ha-card .st-card-body > *:nth-child(odd), ha-card
[class*="body"] > *:nth-child(odd) {
border: none !important;
background-color: transparent !important;
padding: 4px !important;
}
/* COLUMN 2 (Right side): RGB background with extra padding */
ha-card .st-body > *:nth-child(even), ha-card .st-card-body > *:nth-child(even),
ha-card [class*="body"] > *:nth-child(even) {
border: 3px solid rgba({{ r }}, {{ g }}, {{ b }}, 0.3) !important;
background-color: rgba({{ r }}, {{ g }}, {{ b }}, 0.12) !important;
padding: 10px 25px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
box-shadow: 0 0 12px rgba({{ r }}, {{ g }}, {{ b }}, 0.3) !important;
width: fit-content !important;
max-width: max-content !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
flex-grow: 0 !important;
}
/* 7B. APPEND THE SMALL "TARGET" LABEL INSIDE THE RGB BOX */
ha-card .st-body > *:nth-child(even)::after, ha-card .st-card-body >
*:nth-child(even)::after, ha-card [class*="body"] > *:nth-child(even)::after {
content: "Target Temp";
font-size: 0.9rem !important;
line-height: normal !important;
color: var(--secondary-text-color) !important;
margin-top: -2px !important;
font-weight: 500 !important;
text-transform: capitalize !important;
}
/* 8. TARGET BODY ROWS & SENSOR SPACING SPECIFICALLY */
/* A. Reduce vertical gap BETWEEN body rows */
ha-card .st-body, ha-card .st-card-body, ha-card [class*="body"] {
display: flex !important;
flex-direction: column !important;
gap: 11px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* B. Center row content & reduce horizontal space */
ha-card .st-card-row, ha-card st-card-row, ha-card .st-sensors-grid {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
}
/* C. Reduce spacing inside individual sensor pills/items */
ha-card .st-sensors, ha-card st-card-sensors {
gap: 4px !important;
margin-top: 2px !important;
}
ha-card .st-sensor {
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
}
/* 9. SHRINK PRESET & HVAC MODE CONTAINER BOXES & COLUMNS */
/* Force grid container heights down */
ha-card .st-module__mode,
ha-card .st-module__preset,
ha-card .st-modes {
grid-auto-rows: minmax(28px, auto) !important;
grid-template-rows: repeat(auto-fill, minmax(28px, 1fr)) !important;
gap: 4px !important;
}
/* Force button host containers to shrink height & width */
ha-card .st-module__mode *,
ha-card .st-module__preset *,
ha-card .st-modes * {
min-height: 28px !important;
max-height: 28px !important;
}
/* Adjust button padding, heights, and border radius */
ha-card st-ha-card-button,
ha-card .st-mode-item,
ha-card [class*="mode"] button,
ha-card [class*="preset"] button {
min-height: 28px !important;
height: 28px !important;
padding: 0px 6px !important;
border-radius: 6px !important;
box-sizing: border-box !important;
}
/* Font & Icon styling inside mode buttons */
ha-card .st-module__mode *, ha-card .mode-item *, ha-card [class*="mode"] button *,
ha-card .st-modes button * {
color: #ffffff !important;
--paper-item-icon-color: #ffffff !important;
font-size: 0.75rem !important;
}
/* 10. OVERRIDE 'NONE' PRESET ACTIVE BACKGROUND COLOR */
ha-card .st-module__preset, ha-card [class*="preset"] {
--st-mode-active-background: rgba(255, 255, 255, 0.12) !important;
}
ha-card .st-module__preset button:first-child, ha-card [class*="preset"]
button:first-child, ha-card button.st-mode--none, ha-card
button[data-mode="none"] {
background-color: rgba(255, 255, 255, 0.12) !important;
background: rgba(255, 255, 255, 0.12) !important;
}