From 38bdd0be9d1ba9dc50030e6325f6032eb24540ae Mon Sep 17 00:00:00 2001 From: Martin Zaloudek Date: Wed, 19 Oct 2022 21:00:48 +0200 Subject: [PATCH] Update documentation 'Gauge Card' - built-in CSS variables usage (#24534) --- source/_dashboards/gauge.markdown | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/source/_dashboards/gauge.markdown b/source/_dashboards/gauge.markdown index 2481616d5df..1c825c903a3 100644 --- a/source/_dashboards/gauge.markdown +++ b/source/_dashboards/gauge.markdown @@ -154,3 +154,31 @@ segments: - from: 65 color: '#db4437' ``` + +CSS variables can be used (instead of CSS '#rrggbb') for default gauge segment colors: + +- `var(--success-color)` for green color +- `var(--warning-color)` for yellow color +- `var(--error-color)` for red color +- `var(--info-color)` for blue color + +Therefore, the previous example can be defined also as: + +```yaml +type: gauge +entity: sensor.kitchen_humidity +needle: true +min: 20 +max: 80 +segments: + - from: 0 + color: var(--error-color) + - from: 35 + color: var(--warning-color) + - from: 40 + color: var(--success-color) + - from: 60 + color: var(--warning-color) + - from: 65 + color: var(--error-color) +```