mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-23 09:17:06 +00:00
Lovelace background theme (#10283)
* Remove background from examples * Update views.markdown
This commit is contained in:
parent
0fda093e6d
commit
1089948089
@ -103,17 +103,6 @@ This renders the first card on full width, other cards in this view will not be
|
||||
- zone.home
|
||||
```
|
||||
|
||||
## Background
|
||||
|
||||
Style the background of views using [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets). For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
|
||||
|
||||
### Example
|
||||
|
||||
```yaml
|
||||
- title: Living room
|
||||
background: center / cover no-repeat url("/local/background.png") fixed
|
||||
```
|
||||
|
||||
## Themes
|
||||
|
||||
Set a separate [theme](/components/frontend/#themes) for the view and its cards.
|
||||
@ -124,3 +113,17 @@ Set a separate [theme](/components/frontend/#themes) for the view and its cards.
|
||||
- title: Home
|
||||
theme: happy
|
||||
```
|
||||
|
||||
### Background
|
||||
|
||||
You can style the background of your views with a [theme](/components/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
|
||||
|
||||
#### Example
|
||||
|
||||
```yaml
|
||||
# Example configuration.yaml entry
|
||||
frontend:
|
||||
themes:
|
||||
example:
|
||||
lovelace-background: center / cover no-repeat url("/local/background.png") fixed
|
||||
```
|
||||
|
@ -38,16 +38,11 @@ resources:
|
||||
- url: /local/my-webfont.css
|
||||
type: css
|
||||
|
||||
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
|
||||
background: center / cover no-repeat url("/background.png") fixed
|
||||
|
||||
views:
|
||||
# View tab title.
|
||||
- title: Example
|
||||
# Unique path for direct access /lovelace/${path}
|
||||
path: example
|
||||
# Optional background (overwrites the global background).
|
||||
background: radial-gradient(crimson, skyblue)
|
||||
# Each view can have a different theme applied. Theme should be defined in the frontend.
|
||||
theme: dark-mode
|
||||
# The cards to show on this view.
|
||||
|
Loading…
x
Reference in New Issue
Block a user