Changing themes

Matt_Barnes · November 24, 2023, 2:55pm

Hello.

Just getting back into HA after a while out and wanted to change the look of my frontend but run into problems.

I am currently using “transparent” theme
I have this in my configuration file:


frontend:
  themes: !include themes.yaml

I was going to try some new themes and see you are now supposed to use this:

frontend:
  themes: !include_dir_merge_named themes

But when I then try and restart I get the below but that blows my mind I am afraid!
Can I have a themes folder with these files in:
themes.yaml
transaprent.yaml

should the themes.yaml file include Transparent: !include transparent.yaml
does not seem to matter either way?

The system cannot restart because the configuration is not valid: Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['--banner-card-heading-size']. Got '1em' expected a dictionary for dictionary value @ data['frontend']['themes']['accent-color']. Got '#FFFFFF' expected a dictionary for dictionary value @ data['frontend']['themes']['card-background-color']. Got 'var(--paper-card-background-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['card-mod-more-info-yaml']. Got '$: |\n .mdc-dialog {\n background: none;\n }\n .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {\n background: rgba(58, 79, 82,1); \n }\n' expected a dictionary for dictionary value @ data['frontend']['themes']['card-mod-theme']. Got 'Transparent' expected a dictionary for dictionary value @ data['frontend']['themes']['cch-background']. Got 'rgba(150, 150, 150, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['custom_header-background']. Got 'rgba(150, 150, 150, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['dark-primary-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['disabled-text-color']. Got '#7F848E' expected a dictionary for dictionary value @ data['frontend']['themes']['divider-color']. Got 'rgba(0, 0, 0, 1)' expected a dictionary for dictionary value @ data['frontend']['themes']['google-green-500']. Got '#39E949' expected a dictionary for dictionary value @ data['frontend']['themes']['google-red-500']. Got '#E45E65' expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-background']. Got 'rgba(150, 150, 150, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-border-radius']. Got '20px' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-background']. Got 'rgba(255, 255, 255, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-background-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-border-color']. Got 'green' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-red']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-text-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['light-primary-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['mini-media-player-base-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-card-background-color']. Got 'rgba(58, 79, 82,1)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-card-header-color']. Got '#FFFFFF' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-dialog-background-color']. Got '#434954' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-grey-200']. Got '#414A59' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-grey-50']. Got 'var(--primary-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-input-container-color']. Got '#9eb2c9' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-input-label']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon-active-color']. Got '#F9C536' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon-color']. Got 'var(--primary-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon_-_color']. Got 'green' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-selected_-_background-color']. Got '#434954' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-listbox-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-active-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-container-color']. Got 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-disabled-active-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-disabled-secondary-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-knob-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-knob-start-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-pin-color']. Got '#434954' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-secondary-color']. Got 'var(--secondary-background-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-tabs-selection-bar-color']. Got 'green' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-bar-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-button-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-ink-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-unchecked-bar-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-unchecked-button-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-unchecked-ink-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['primary-background-color']. Got '#383C45' expected a dictionary for dictionary value @ data['frontend']['themes']['primary-color']. Got '#5294E2' expected a dictionary for dictionary value @ data['frontend']['themes']['primary-text-color']. Got '#FFFFFF' expected a dictionary for dictionary value @ data['frontend']['themes']['secondary-background-color']. Got '#383C45' expected a dictionary for dictionary value @ data['frontend']['themes']['secondary-text-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['sidebar-background-color']. Got '#383C45' expected a dictionary for dictionary value @ data['frontend']['themes']['table-row-alternative-background-color']. Got '#3E424B' expected a dictionary for dictionary value @ data['frontend']['themes']['table-row-background-color']. Got '#353840' expected a dictionary for dictionary value @ data['frontend']['themes']['text-primary-color']. Got 'var(--primary-text-color)'. (See /config/configuration.yaml, line 22).

Ildar_Gabdullin · November 25, 2023, 1:30am

Have same in my configuration.yaml.
Then the “themes” folder may contain either one or a few yaml-files - or subfolders with them.

Probably your theme file is invalid?
Post it here.

Matt_Barnes · November 25, 2023, 9:08am

I don’t get an error until I change include themes to include the directory.

And yet the transparent theme I’m using is not in themes.yaml it’s separate in the folder.

Matt_Barnes · November 27, 2023, 4:08pm

this does not cause any errors:

frontend:
  themes: !include themes.yaml

but this does:


frontend:
 themes: !include_dir_merge_named themes

in my themes.yaml file (not in the themes folder) it points to this theme:

Transparent: !include themes/transparent.yaml

when I change from themes: !include themes.yaml to themes: !include_dir_merge_named themes I get the error. The themes folder has a copy of the themes.yaml in which is exactly the same. Should this though say something different if the themes.yaml file is in the themes folder?

Transparent: !include themes/transparent.yaml

ie should it just say

Transparent: !include transparent.yaml

Matt_Barnes · November 27, 2023, 4:13pm

changing that does not work.

This is the code for the transparent.yaml but the code is the same either way, so do not think its the transparent.yaml file thats the problem although that is where the error points

this code came from a tutorial

#Theme taken from here: https://techleech.com/2019/04/11/diy-smart-home-bonus-content-home-assistant-theme/
#Uses a background image over transparent cards 
#Also uses the Custom Compact Header js file and the coding within CCH in the UILovelace file


card-mod-theme: Transparent
card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        background: none;
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: rgba(58, 79, 82,1);   
      }


# Main colors
primary-color: '#5294E2'                                                        # Header
accent-color: '#FFFFFF'                                                         # Accent color
dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
ha-card-border-radius: '20px'   
ha-card-background: 'rgba(150, 150, 150, 0.1)'
cch-background: 'rgba(150, 150, 150, 0.1)'                                      #Attempt at changes Custom Compact Header to transparent
custom_header-background: 'rgba(150, 150, 150, 0.1)'                                      #Attempt at changes Custom Compact Header to transparent
card-background-color: 'var(--paper-card-background-color)'                     #Attempt at making unused entities table visible
sidebar-background-color: '#383C45'





# 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: '#cae2fe'               #this is secondary text on the weather card for eg.  was '#5294E2'
disabled-text-color: '#7F848E'                      # Disabled text colour
label-badge-border-color: 'green'                                      # Label badge border, just a reference value   
#sidebar-text-color: '#cae2fe' 

# Background colors                                                            
primary-background-color: '#383C45'                                             # Settings background
secondary-background-color: '#383C45'                                           # Main card UI background  
divider-color: 'rgba(0, 0, 0, 1)'                                             # Divider .12

# Table rows                                                                   
table-row-background-color: '#353840'                                           # Table row
table-row-alternative-background-color: '#3E424B'                               # Table row alternative
           
                                                                           
# Nav Menu                                                                   
paper-listbox-color: '#cae2fe'     #HAVE CHANGED THIS 'var(--primary-color)'                                     # Navigation menu selection hoover
#paper-listbox-background-color: 'var(--primary-background-color)'          #    '#2E333A'                                       # Navigation menu background      
#material-background-color: 'var(--primary-background-color)' 
#data-table-background-color: 'var(--primary-background-color)'   
paper-grey-50: 'var(--primary-text-color)'                                   
paper-grey-200: '#414A59'                                                       # Navigation menu selection
                
                                                                           
# Paper card                                                               
paper-card-header-color: '#FFFFFF'      #'var(--accent-color)'                  # Card header text colour
paper-card-background-color: 'rgba(58, 79, 82,1)'                               # Card background colour  - this changes the colour and transparency of hacs pop ups etc

paper-dialog-background-color: '#434954'                                        # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color in cards etc ie water drop icon in plan card
paper-input-container-color: '#9eb2c9'                                          # this changes the text colour in boxes where you type, ie shopping list and search bars
paper-input-label: '#cae2fe'

paper-item-icon-active-color: '#F9C536'                                         # Icon color active
paper-item-icon_-_color: 'green'           
paper-item-selected_-_background-color: '#434954'                               # Popup item select                      
paper-tabs-selection-bar-color: 'green'
mini-media-player-base-color: '#cae2fe'  #'#33515b'                             #attempt to make media player black text for sky media




# Labels 
label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
label-badge-text-color:  '#cae2fe'     #HAVE CHANGED THIS   'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
label-badge-background-color:  '#cae2fe'     #HAVE CHANGED THIS  '#2E333A'                                         # Same, but can also be set to transparent here
label-badge-background: 'rgba(255, 255, 255, 0.1)'

# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'  

# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: '#434954'   #'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'


# Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'



#Banner-card
--banner-card-heading-size: 1em

Matt_Barnes · November 27, 2023, 5:19pm

So I have played around. It is the transparent.yaml that is causing the error but only if I use

frontend:
  themes: !include_dir_merge_named themes

why would that matter?

Ildar_Gabdullin · November 28, 2023, 2:58pm

Will work if the “themes.yaml” is located in “/config”.

From a scratch:

Create a “themes” folder in “/config”. If you already have this folder - make it EMPTY.
Create 2 files in this folder “test_1.yaml” & “test_2.yaml”:

test_1:
  primary-text-color: yellow

test_2:
  primary-text-color: magenta

Add this in “configuration.yaml”:

frontend:
  themes: !include_dir_merge_named themes

Reload themes.
Experiment:

When you test the whole idea - then you will:

Use a more complex tree-like structure in the “themes” folder:

themes
  basic
    basic_1.yaml
    basic_2.yaml
  test
    test_1.yaml
    test_2.yaml

Add card-mod-theme code into theme files etc.