Update documentation 'Gauge Card' - built-in CSS variables usage (#24534)

This commit is contained in:
Martin Zaloudek 2022-10-19 21:00:48 +02:00 committed by GitHub
parent 597d813319
commit 38bdd0be9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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)
```