Themes.yaml

Share your Projects! Themes
1

Can anybody tell me hoe the themes.yaml should look like. When I copy the posted lines in the yaml file for themes I get all kinds of errors.
I use frontend: !include themes.yaml in the config file. Then I copy the exact lines from the examples in the themes.yaml.
Please help me out how to start the file?

1 Like
2

Theme title should not be indented and should be followed by a colon. All subsequent lines in that theme should be indented 2 spaces.

Example:

midnight:
  # Main colors
  primary-color: '#5294E2'                            # Header
  accent-color: '#E45E65'                             # Accent color
  dark-primary-color: 'var(--accent-color)'                     # Hyperlinks                     
  light-primary-color: 'var(--accent-color)'                    # Horizontal line in about
                                       
  # Text colors                                  
  primary-text-color: '#FFFFFF'                           # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                 # Primary text colour
  secondary-text-color: '#5294E2'                         # For secondary titles in
3

I think you have to do this in your config.yaml

frontend:
  themes:  !include themes.yaml
4

Thank you both! I missed the themes:. Also the indent was not right due to copy and paste.
Is it possible to combine multiple themes in just one themes.yaml? Or is it just one theme per file?

2 Likes
5

To have multiple themes in one file, you simply have to have the unindented theme ID/name on a new line followed by the theme yaml. I have 4 themes in my themes.yaml currently.

To have multiple themes in individual files you have to change your !include statement so it knows what to look for. At work right now so can’t hunt for an example.

6

Thanks kethoth. And from those 4 themes in one file you can choose one from within HA?
Have a good workday!

7

That’s correct, all 4 show up in the drop down.

image

Edit:
Here’s the official docs on splitting the configuration into multiple files/directories.

1 Like
8

Yup. It is working! Great solution. Thanks.

9

Or you can create a folder called themes with individual themes on it and do this

themes: !include_dir_merge_list themes

10

I have tried to use include_dir_merge_list but does not works!
I have found that with the include_dir_merge_named all works fine!

I have found this way to load themes split in multiple files:

themes: !include_dir_merge_named themes/

10 Likes