diff --git a/source/_integrations/frontend.markdown b/source/_integrations/frontend.markdown index f7ce0db349c..6d022c91fd6 100644 --- a/source/_integrations/frontend.markdown +++ b/source/_integrations/frontend.markdown @@ -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`