mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-22 00:36:49 +00:00
Update documentation 'Gauge Card' - built-in CSS variables usage (#24534)
This commit is contained in:
parent
597d813319
commit
38bdd0be9d
@ -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)
|
||||
```
|
||||
|
Loading…
x
Reference in New Issue
Block a user