jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-23 01:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
source/_dashboards/gauge.markdown
View File

@ -154,3 +154,31 @@ segments:
- from: 65 - from: 65
color: '#db4437' 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)
```