From 38bdd0be9d1ba9dc50030e6325f6032eb24540ae Mon Sep 17 00:00:00 2001
From: Martin Zaloudek <ma-zal@users.noreply.github.com>
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)
+```