The theme selector requires automation with Node-RED. There is no point in just placing the selector on the interface. It will not work.
I just added the Home Assistant’s native automation option to the documentation. Check it out there.
Got it working Ricardo, I had not restarted HA 
Great work! Love it.
2 automations to change theme at sunrise, sunset and start time
- id: '1581901610830344'
alias: Hass Switch Theme
trigger:
- entity_id: sun.sun
for: 00:30:00
from: below_horizon
platform: state
to: above_horizon
- entity_id: sun.sun
for: 00:10:00
from: above_horizon
platform: state
to: below_horizon
condition: []
action:
- data_template:
name: '{% if is_state(''sun.sun'',''below_horizon'') %} ios-dark-mode {% else
%} ios-light-mode {% endif %}'
service: frontend.set_theme
- id: '981239919850530'
alias: Hass Switch Theme At Start
trigger:
- event: start
platform: homeassistant
action:
- data_template:
name: '{% if is_state(''sun.sun'',''below_horizon'') %} ios-dark-mode {% else
%} ios-light-mode {% endif %}'
service: frontend.set_theme
3 Likes
I used HACS.
1 Like
Really love the look of these themes but I can’t seem to get the background images working. I’ve installed using HACS
I have this up and running but the clock card https://github.com/Villhellm/lovelace-clock-card and the sensor card https://www.home-assistant.io/lovelace/sensor/ isn’t changing to the theme. The backgrounds are changing ok on both cards but not the hands on the clock or the graph line on the sensor card. Any ideas what to check please.
Im running the current cards and all things are updated.
1 Like
I thought I would post a couple of pictures to show what im getting with the Default theme:
And then with a Caule theme selected the clock and sensor graph don’t appear to update.
Would be grateful for some feedback if this can be resolved.
1 Like
Do you have any settings in your lovelace code for displaying backgrounds?
I have already identified this problem. I’ll fix this week. Thanks for reporting!
1 Like
No problem, sorry I didn’t reply sooner but yeh it was only your themes I had this issue with. Glad you found the fix for the other problem and look forward to it, may just change my theme over to yours again to try again 
Thank you
i fixed it… update now!
I love the “glass” versions of these themes, but I have a bit of an issue. One of my Lovelace views uses a different custom theme and the transparency effect is carrying through to the cards in that view.
I noticed that this doesn’t happen with some other themes (including others from this pack), but I can’t figure out how they’re doing it. What am I missing?
1 Like
HI! Very nice… installed in the manual way, as i’m using HA Core.
When changing theme, weather card looses the icons.
Any hint?
Thx in advance!
1 Like
Did you download the file with the animated icons?
Yes, Sir.
my dir listing.
#ls -R caule-themes-pack-1
caule-themes-pack-1:
animated-icons backgrounds
caule-themes-pack-1/animated-icons:
clear-night.svg fog.svg lightning-rainy.svg partlycloudy.svg rainy.svg snowy.svg windy.svg
cloudy.svg hail.svg lightning.svg pouring.svg snowy-rainy.svg sunny.svg windy-variant.svg
caule-themes-pack-1/backgrounds:
aqua.jpg blue.jpg coral.jpg gray.jpg green.jpg orange.jpg pink.jpg purple.jpg rose.jpg yellow.jpg
Thx!``
1 Like
Is the “caule-themes-pack-1” folder inside the “www” folder?
In this way: www/caule-themes-pack-1/backgrounds
no, the “caule-themes-pack-1” is under the themes folder. Changing themes works, but when changing from default animated icons vanish.
root@wolke:/var/homeassistant/homeassistant# ls
automations.yaml configuration.yaml groups.yaml home-assistant_v2.db mysensors-1.json-orig scripts.yaml server.key telegram-chat-id.txt themes.yaml
bravia.conf deps home-assistant.log mysensors-1.json scenes.yaml secrets.yaml server.pem themes tts
ls /var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/
clear-night.svg fog.svg lightning-rainy.svg partlycloudy.svg rainy.svg snowy.svg windy.svg
cloudy.svg hail.svg lightning.svg pouring.svg snowy-rainy.svg sunny.svg windy-variant.svg
less themes/caule-themes-pack-1.yaml
snip
switch-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color)
switch-unchecked-color: var(--paper-toggle-button-unchecked-bar-color)
switch-unchecked-track-color: var(--paper-toggle-button-unchecked-bar-color)
# Table colors
table-row-background-color: var(--divider-color)
table-row-alternative-background-color: var(--secondary-background-color)
card-background-color: var(--primary-background-color)
#Animated icons
weather-icon-clear-night: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/clear-night.svg")
weather-icon-cloudy: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/cloudy.svg")
weather-icon-fog: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/fog.svg")
weather-icon-lightning: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/lightning.svg")
weather-icon-lightning-rainy: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/lightning-rainy.svg")
weather-icon-partlycloudy: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/partlycloudy.svg")
weather-icon-pouring: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/pouring.svg")
weather-icon-rainy: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/rainy.svg")
weather-icon-hail: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/hail.svg")
weather-icon-snowy: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/snowy.svg")
weather-icon-snowy-rainy: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/snowy-rainy.svg")
weather-icon-sunny: url("/var/homeassistant/homeassistant/themes/caule-themes-pack-1/animated-icons/sunny.svg")
all the pathes are adjusted.
I’m running HA Core version.
1 Like
This is the error. Look carefully at the tutorial. If the installation is done manually, the downloaded files must be copied to the www folder inside the homeassistant folder.
I recommend downloading the themes file and the complementary files again. Copy the caule-themes-pack-1.yaml file to the themes folder. Copy the complementary files to the www folder.
The themes file path must be:
homeassistant/themes/caule-theme-pack-1.yam
The path of the companion files must be:
homeassistant/www/caule-theme-pack-1/backgrounds
homeassistant/www/caule-theme-pack-1/animated-icons
If you don’t have a www folder, then create it
1 Like
Thx, worked!
But why didn’t it work with adjusted pathes? Just curious (HA newbie).