Post your config for the frontend stuff.
here .
javascript_version: auto
themes: !include_dir_merge_named frontend_themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-tiles.html
- /local/custom_ui/state-card-mini-media-player.html
- /local/custom_ui/state-card-hline.html
- /local/custom_ui/state-card-script-custom-text.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-table.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-tiles_es5.html
- /local/custom_ui/state-card-mini-media-player_es5.html
- /local/custom_ui/state-card-hline_es5.html
- /local/custom_ui/state-card-script-custom-text-es5.htm
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.htmlI receive this error, what am I doing wrong?
2018-06-15 11:37:32 ERROR (MainThread) [homeassistant.config] Package badge_colour setup failed. Component frontend duplicate key āthemesā (See /config/packages/badge_colour.yaml:0).
Thats badge_colour.yaml package
homeassistant:
customize:
sensor.netatmo_grandma_bedroom_temperature:
templates:
theme: >
if (state > 25) {
return 'hot';
} else if (state >= 18 ) {
return 'comfortable';
} else {
return 'cold';
}
frontend:
themes:
cold:
primary-text-color: '#447ebc'
label-badge-red: '#447ebc'
comfortable:
primary-text-color: '#629e51'
label-badge-red: '#629e51'
hot:
primary-text-color: '#bf1b00'
label-badge-red: '#bf1b00'
and this is configuration.yaml
frontend:
javascript_version: latest #es5
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-mini-media-player.html
- /local/custom_ui/state-card-tiles.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-floorplan.html
- /local/custom_ui/state-card-mini-media-player_es5.html
- /local/custom_ui/state-card-tiles_es5.html
themes: !include theme_midnight.yaml
and this is theme_midnight.yaml
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
lots of code
did you seemy config ?
do i have something wrong?
best regards
You are attempting to merge themes from a package, youāll have to move those from the package to your midnight theme in order to work correctly.
Your config looks fine, one of your themes however is not.
yes only the midnight theme gives the error that i posted.
Check your formatting.
1 Like
sorry iĀ«m new here, what do you mean, formatation where.
done 
thanks for the tip
missing tabs
Donāt use tabs. Use spaces.
2 Likes
Many Thanks
Dont know what I am doing wrong here. Getting a lot of errors 
Running Hassio 0.87.0
Configuration.yaml
frontend:
themes: !include theme_midnight.yaml
javascript_version: latest
Then I created a new file config/theme_midnight.yaml and pasted the code from the midnight template.
Error message:
Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['accent-color']. Got '#E45E65'
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, .12)'
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']['label-badge-background-color']. Got '#2E333A'
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 'var(--primary-text-color)'
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']['midnight']. Got None
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-card-background-color']. Got '#434954'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-card-header-color']. Got 'var(--accent-color)'
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-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-background-color']. Got '#2E333A'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-listbox-color']. Got 'var(--primary-color)'
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 'var(--accent-color)'
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 '#5294E2'
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). Please check the docs at https://home-assistant.io/components/frontend/I have not seen your theme_midnight.yaml file yet but it kinda looks like you need to take the line āthemes:ā out of the file. And then adjust the indenting of the lines that follow.
Here is my theme_midnight.yaml
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 more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
# Background colors
primary-background-color: '#383C45' # Settings background
secondary-background-color: '#383C45' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
# Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
# Nav Menu
paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#2E333A' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#414A59' # Navigation menu selection
# Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: '#434954' # Card background colour
paper-dialog-background-color: '#434954' # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
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'
# Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
# 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: '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'you need to indent 2 spaces for all variables after midnight:
like:
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 aboutThank you very much, didnāt think about those spaces.
Works fine now 
1 Like
Hey,
can you please tell me how to include input_datetime in this theme? right now the input field looks a bit weird.
Which web browser are you using?
I am using Firefox.