Another Dark Theme

in my configuration.yaml, I have

frontend:
  themes: !include_dir_merge_named themes/

Then on the root folder of home assistant, I have a folder called themes with a yaml file for each themes.
For instance, I have the following file: dark_theme.yaml

dark_theme:
  # Main Stuff #
  primary-color: "#1ABA92" # Primary (most of the UI)
  primary-background-color: "#303030" # Primary background colour (dialogs, e.t.c)
  secondary-background-color: "#303030" # Secondary background colour (main UI background)
  paper-card-background-color: "#424242" # Card background colour
  paper-item-icon-color: "#1ABA92" # Icon colour
  primary-text-color: "#FFFFFF" # Primary text colour
  secondary-text-color: "rgba(255, 255, 255, 0.7)" # Secondary text colour
  disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
  divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
  paper-card-header-color: "#FFFFFF" # Card header text colour

  # Nav Menu #
  paper-listbox-background-color: "#424242" # Listbox background colour
  paper-listbox-color: "#FFFFFF" # Listbox text colour
  paper-grey-200: "#616161" # Listbox selected item background colour

  # Switches #
  paper-toggle-button-checked-ink-color: "#1ABA92"
  paper-toggle-button-checked-button-color: "#1ABA92"
  paper-toggle-button-checked-bar-color: "#1ABA92"

  # Sliders #
  paper-slider-knob-color: "#1ABA92"
  paper-slider-knob-start-color: "#1ABA92"
  paper-slider-pin-color: "#1ABA92"
  paper-slider-active-color: "#1ABA92"
  paper-slider-secondary-color: "#33F2D8"

which is a heavily based on a theme posted on this forum by user @GreenTurtwig (post 37).

I will try to clean up all my codes and uplaod them to github this week-end, as you seems to be interested in all the same stuff as me, it might be helpful for you :wink:

3 Likes

Thanks Thomas.

So when I put your theme code in my configuration.yaml under frontend and themes, I should expect the theme colour to change automatically? Or do I have to select it manually?

Because like I mentioned in my previous post, when I upload the theme code under frontend and themes, I don’t see any change in the colour of my theme.

in order to change the theme, i suggest you create a script for simplicity

script:    
  set_currenttheme:
    alias: 'Set Current Theme'
    sequence:
      - service: frontend.set_theme
        data_template:
          name: '{{states.input_select.current_theme.state}}'

and an input_select to choose which theme to load

input_select:
  current_theme:
    name: 'Current Theme'
    options:
     - 'default'
     - 'dark_theme'
    initial: 'default'
    icon: 'mdi:palette'

then you just add it to a group in order to have both the input_select and the script show in the frontend. You select the right theme, then click activate just next to the script and tadaaa it works.

The automation I have given previously in post 73 automatically changes the theme when the sun sets/rise (so no direct change otherwise)

You can also call the service manually using the dev-services tools like I did on the image below

you can also add an automation to load a specific theme at reboot of HA just like suggested by @ahs

  - id: switch_hass_template
    alias: switch_hass_template
    trigger:
      - platform: homeassistant
        event: start
    action:
      - service: frontend.set_theme
        data_template:
          name: "{{ states.input_select.hass_template.state }}"
3 Likes

Thanks will have a go at it

Instead of using a script that requires you to click activate, I recommend using an automation that changes the theme based on input_select.current_theme:

  - id: change_current_theme
    alias: 'Change Current Theme'
    initial_state: 'on'
    trigger:
      - platform: state
        entity_id: input_select.current_theme
    action:
      - service: frontend.set_theme
        data_template:
          name: '{{states.input_select.current_theme.state}}' 
3 Likes

I have the following alternative to @ahs solution. I implemented an input_boolean to control enable/disable the automations (if auto_darktheme is off, the theme will not change automatically)

# Set dark theme for the night
- alias: 'Set dark theme for the night'
  initial_state: True
  trigger:
    - platform: sun
      event: sunset
  condition:
    - condition: state
      entity_id: input_boolean.auto_darktheme
      state: 'on'
  action:
    - service: frontend.set_theme
      data:
        name: 'dark_theme'
        
        
# Set default theme for the day
- alias: 'Set default theme for the day'
  initial_state: True
  trigger:
    - platform: sun
      event: sunrise
  condition:
    - condition: state
      entity_id: input_boolean.auto_darktheme
      state: 'on'
  action:
    - service: frontend.set_theme
      data:
        name: 'default'
2 Likes

Hi @lambtho

I have setup all the themes and everything works fine. However, whenever I restart HA my themes reload to the default one. My config is below but I have no joy:

- alias: 'Automation for Theme HA Restart'
  initial_state: True
  trigger:
    - platform: homeassistant
      event: start
  action:
    - service: frontend.reload_themes

Can anyone help please?

You are reloading your themes on HA start, what you want is to set the theme on start.

action:
    - service: frontend.set_theme
      data:
        name: <your_theme_name_here>
1 Like

Hi, for some reason i didn’t get it to work. I can select a theme from the input_select in the frontend but nothing happens. When i tried with my iPhone using the Home Assistant app it worked. The app connects by IP and on my computer i use hassbian.local:8123 address. I tried on my computer to connect with ip and everything works. Any idea why it does not work with hassbian.local:8123?

Realy like the theme, Just a small fix for tables not looking right, I added the following to the end of the theme file (not sure if both lines are needed):

  # Tables #
  table-row-background-color: transparant
  table-row-alternative-background-color: transparant

Its not real without a screenshot

Screenshot Please…

1 Like


here is the table with the transparent rows - as opposed to them being white:

Can anyone please tell me which line affects the developer tools icons? Also, has anyone been successful with changing the initial color (unselected) of the icons to the left of overview, map, logbook, history, etc.

Try sidebar-icon-color:

I’m pretty sure this does both the sidebar (unselected) icons and the developer tools icons.

That worked. Thank you.

1 Like

I love this theme but i cant see my home icon at Maps… how can i change it?

Yes, they are white in fact.
What is the line to put another color?

i need some help with this im getting the following error:

Configuration invalidCHECK CONFIG

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 C:\Users\HTPC\AppData\Roaming.homeassistant\configuration.yaml, line 20). Please check the docs at https://home-assistant.io/components/frontend/

Hi there,

just made all step like you said, but when a try to change theme (user profile) says “No themes available.”
I also tried to change manually using the services, bu i don’t have the domain “frontend”, although the frontend is active in configuration.yaml (i simply copy>paste your code)

Can anyone help me?

Regards