From facce7b016f7d1fda5d455886247763cd14884bc Mon Sep 17 00:00:00 2001 From: Jan-Philipp Benecke Date: Mon, 29 Sep 2025 09:28:24 +0200 Subject: [PATCH] Add custom color token for control color (#27227) --- src/components/ha-slider.ts | 2 +- src/resources/theme/color/color.globals.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts index 6ab695dc9b..3b78f283cb 100644 --- a/src/components/ha-slider.ts +++ b/src/components/ha-slider.ts @@ -19,7 +19,7 @@ export class HaSlider extends Slider { Slider.styles, css` :host { - --wa-form-control-activated-color: var(--primary-color); + --wa-form-control-activated-color: var(--ha-control-color); --track-size: var(--ha-slider-track-size, 4px); --marker-height: calc(var(--ha-slider-track-size, 4px) / 2); --marker-width: calc(var(--ha-slider-track-size, 4px) / 2); diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts index 2b61239415..38eafcf166 100644 --- a/src/resources/theme/color/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -273,6 +273,9 @@ export const colorStyles = css` --material-background-color: var(--card-background-color); --material-secondary-background-color: var(--secondary-background-color); --material-secondary-text-color: var(--secondary-text-color); + + /* Color for Home Assistant input controls e.g. slider, radio buttons */ + --ha-control-color: var(--primary-color); } `;