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-13 12:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extended frontend theme info a bit (#16280)

Browse Source 
Co-authored-by: Franck Nijhof <git@frenck.dev>
This commit is contained in:
Philip Allgaier 2021-01-23 14:57:52 +01:00 committed by GitHub
parent 84b112024f
commit c4e721278d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
source/_integrations/frontend.markdown
View File

@ -58,20 +58,30 @@ frontend:
themes:
happy:
primary-color: pink
text-primary-color: purple
mdc-theme-primary: plum
sad:
primary-color: blue
```
The example above defined two themes named `happy` and `sad`. For each theme you can set values for CSS variables. For a partial list of variables used by the main frontend see [ha-style.ts](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.ts).
The example above defined two themes named `happy` and `sad`. For each theme you can set values for CSS variables. If you want to provide hex color values, wrap those in apostrophes, since otherwise YAML would consider them to be comments (`primary-color: '#123456'`). For a partial list of variables used by the main frontend see [ha-style.ts](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.ts).
As with all configuration, you can either:
- Directly specify the themes inside your `configuration.yaml` file
- Put them into a separate file (e.g. `themes.yaml`) and include that in your configuration (`themes: !include themes.yaml`)
- Create a dedicated folder (e.g. `my_themes`) and include all files from within this folder (`themes: !include_dir_merge_named my_themes`)
For more details about splitting up the configuration into multiple files, see [this page](/docs/configuration/splitting_configuration/).
Check our [community forums](https://community.home-assistant.io/c/projects/themes) to find themes to use.
### Setting themes
## Setting themes
There are 2 themes-related services:
- `frontend.reload_themes`: reloads theme configuration from your `configuration.yaml` file.
- `frontend.set_theme`: sets backend-preferred theme name.
- `frontend.reload_themes`: Reloads theme configuration from your `configuration.yaml` file.
- `frontend.set_theme`: Sets backend-preferred theme name.
### Service `set_theme`