Themes: UI config++ vs

koQuarium · March 14, 2020, 5:51pm

I am experimenting with HA for a while (love it) and am now working at adjusting the UI. I made a layout / structure with the UI editor, so far so good. Now I want to adjust the look & feel and understand that this actually comes down to applying a theme. However, I cannot select a theme in the UI editor.

I assume I should have a drop down here with some themes - correct?

In my user profile I selected “back-end selected”.

I installed a theme in Hacs.

I expected this theme to be available in the UI Editor, but it is not.

What is going wrong?

I have searched the Internet but I am still struggling. I see posts about defining themes in “themes.yaml” (so called yaml-mode?), or configuring “lovelace config file”. Is this indeed the way to go? Or is configuring themes.yaml etc not necessary and is adding / applying possible with the UI editor in conjunction with Hacs and my user profile?

My experience is that (for newbees) it sometimes is difficult to find the right information about HA. HA develops quickly and that is wonderful. Consequence however is that a lot of information on the Internet (and the formal HA documentation[?]) often is outdated, witch can be confusing. Therefore this check about the way to move forward.

anon43302295 · March 14, 2020, 5:52pm

Have you restarted homeassistant since installing the theme?

koQuarium · March 14, 2020, 6:44pm

I’ve done multiple reboots, but I don’t see any additional themes in the UI editor.

When I try to install a second theme from HACS I get the following message.

I think it is strange, because I have not installed that theme before.

Is something strange going on?

anon43302295 · March 14, 2020, 6:46pm

Hacs is playing up a bit, you can ignore that error.

Install a couple of themes - restart homeassistant, and make sure that in your config directory (where your configuration.yaml is) there is a directory called themes with a file for each theme you downloaded inside.

If they don’t appear in your list try clearing your browser cache.

koQuarium · March 14, 2020, 7:28pm

Installed a few themes.

Dir and sub dir’s were created “under the hood”
k2 foldr

Restarted twice

Cleared Chrome cache

Still no themes in UI editor

Annoying, grrr

anon43302295 · March 14, 2020, 8:01pm

And you do have

frontend:
  themes: !include_dir_named themes

In your configuration.yaml?

koQuarium · March 14, 2020, 9:13pm

You were just ahead of me. I had started doing something else and suddenly realized that probably still “some configuration” had to be done in config.yaml.

But it is still not working

This config line went wrong => HA started in safeMode
frontend:
themes: !include_dir_named themes

After that I tried
frontend:
themes: !include_dir_named /root/config/themes

and
frontend:
themes: !include_dir_named /root/config/themes**/**

HA started ok after 2) and 3) but no themes available in the UI editor (I also cleared the cache).

I guess I am almost there…but am doing something wrong in the line “themes: !include_dir_named themes”

Folder structure is as follows:

I guess I don’t have to refer to one specific theme - correct?

anon43302295 · March 14, 2020, 9:40pm

1 is the correct words - I can’t tell the formatting from your post.

Please put it back to 1 and post any errors when you restart.

koQuarium · March 14, 2020, 10:55pm

configuration.yaml
k configfile

Start in safe mode

Error
k3 error

I waited a few minutes for the errorLog, but it never came …

koQuarium · March 14, 2020, 11:05pm

I dont’ know if relevant for now …
SystemLog, from earlier tonight.

koQuarium · March 14, 2020, 11:22pm

Again not sure if relevant…
I am one HA core update behind

anon43302295 · March 14, 2020, 11:35pm

Can you show me the contents of the themes directory (and the subdirectories) please?

koQuarium · March 14, 2020, 11:49pm

Same pattern for all four dirs

finity · March 15, 2020, 3:33am

mine is as follows:

frontend:
  javascript_version: latest
  themes: !include_dir_merge_named themes

but I have all of my themes yaml files directly under the “themes” directory not included in any subdirectories.

I don’t think that should matter tho.

koQuarium · March 15, 2020, 9:33am

I have tried finity’s setup => nok, safe mode

With config.yaml as follows:

frontend:
javascript_version: latest
themes: !include_dir_merge_named themes

And an empty themes folder
HA boots up ok

With any content in the themes-folder it goes wrong => ha boots to safe mode

Doesn’t matter if the the theme-files are directly located in the themes-folder or in subDirs.

Something else that I noted.
If I uninstall themes via Hacs the corresponding theme-subDirs in the config-Dir are not being removed. I expected that it would

anon43302295 · March 15, 2020, 9:38am

Possible that one of your theme files has an erroneous entry that homeassistant doesn’t like, but without the error log we’re all stumbling around in the dark.

koQuarium · March 15, 2020, 10:13am

I can test that, but then I need a theme file that is guaranteed to be good.

I have tried several theme files that I obtained via HACS. To avoid all misunderstandings: can someone send me a theme file that is guaranteed good?

And the logFile that should give more clearity. Is that the systemLog behind the supervisor tab, or is it another logFile?

anon43302295 · March 15, 2020, 10:45am

The homeassistant log, should be in your config directory.

koQuarium · March 15, 2020, 11:06am

logEntries below.

See indeed some frontEnd-stuff; culprit in line 2?

2020-03-15 11:13:22 WARNING (MainThread) [homeassistant.loader] You are using a custom integration for hacs which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you do experience issues with Home Assistant.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.config] Invalid config for [frontend]: value should be a string for dictionary value @ data[‘frontend’][‘themes’][‘halloween’][‘halloween’]. Got OrderedDict([(‘dark-primary-color’, ‘#7a4901’), (‘disabled-text-color’, ‘#242424’), (‘divider-color’, ‘rgba(255, 0, 0, 0.12)’), (‘label-badge-background-color’, ‘var(–secondary-background-color)’), (‘label-badge-text-color’, ‘var(–text-primary-color)’), (‘light-primary-color’, ‘#ff8f45’), (‘paper-card-background-color’, ‘#000000’), (‘paper-card-header-color’, ‘#var(–paper-item-icon-color)’), (‘paper-grey-200’, ‘#4e4e4e’), (‘paper-grey-50’, ‘var(–primary-text-color)’), ('paper-item-icon-ac… (See /config/configuration.yaml, line 13). Please check the docs at https://www.home-assistant.io/integrations/frontend
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for frontend: Invalid config.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Unable to set up dependencies of panel_custom. Setup failed for dependencies: frontend
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for panel_custom: Could not set up all dependencies.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Unable to set up dependencies of map. Setup failed for dependencies: frontend
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for map: Could not set up all dependencies.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Unable to set up dependencies of hacs. Setup failed for dependencies: frontend
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for hacs: Could not set up all dependencies.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Unable to set up dependencies of logbook. Setup failed for dependencies: frontend
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for logbook: Could not set up all dependencies.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Unable to set up dependencies of hassio. Setup failed for dependencies: panel_custom
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for hassio: Could not set up all dependencies.
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Unable to set up dependencies of default_config. Setup failed for dependencies: frontend, logbook, map
2020-03-15 11:13:30 ERROR (MainThread) [homeassistant.setup] Setup failed for default_config: Could not set up all dependencies.
2020-03-15 11:13:35 WARNING (MainThread) [homeassistant.bootstrap] Detected that frontend did not load. Activating safe mode
2020-03-15 11:13:38 WARNING (MainThread) [homeassistant.components.hassio.handler] Don’t use ‘server_host’ options with Hass.io

finity · March 15, 2020, 11:31am

save this as light.yaml in your themes directory:

Light:
  base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
  base-sat: '5%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
  # MyVar
  huesat: 'var(--base-hue), var(--base-sat),'
  # Primary Color
  primary-color: 'hsl(var(--huesat) 36%)' #header colors and some text colors
  # Backgrounds
  primary-background-color: 'hsl(0, 0%, 98%)'
  secondary-background-color: 'hsl(0, 0%, 95%)'
  #ha-card-background:
  paper-card-background-color: 'var(--primary-background-color)'
  # Text colors
  primary-text-color: 'hsl(0, 0%, 50%)'
  secondary-text-color: 'hsl(0, 0%, 60%)'
  disabled-text-color: 'hsl(0, 0%, 70%)'
  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'  
  # Paper card
  paper-card-header-color: 'hsla(0, 0%, 0%, 0.5)'
  paper-item-icon-color: 'hsl(0, 0%, 80%)'
  paper-item-icon_-_color: 'var(--paper-item-icon-color)'  
  # Nav Menu
  paper-listbox-color: 'hsl(0, 0%, 85%)'
  paper-grey-200: 'hsl(0, 0%, 95%)'
  # Switches
  paper-toggle-button-checked-ink-color: 'hsl(192, 0%, 50%)'
  paper-toggle-button-checked-button-color: 'hsl(192, 0%, 98%)'
  paper-toggle-button-checked-bar-color: 'hsl(192, 0%, 50%)'
  paper-toggle-button-unchecked-bar-color: 'hsl(192, 0%, 85%)'
  # Shadows  
  # Sliders
  paper-slider-knob-color: 'var(--primary-color)'
  paper-slider-knob-start-color: 'var(--primary-color)'
  paper-slider-pin-color: 'var(--primary-color)'
  paper-slider-active-color: 'var(--primary-color)'
  paper-slider-secondary-color: 'hsl(0, 0%, 90%)'
  # Labels
  label-badge-red: 'var(--primary-color)'
  label-badge-background-color: 'var(--paper-card-background-color)' #ha-card-background:

then remove all of the others you have there now somehow. you can delete them or copy them somewhere else or uninstall thru HACS (recommended).