Caule Themes Pack 1 - by caulecriativo.com

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 :slight_smile:

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 :+1: Thank you

i fixed it… update now!

Thank you. Much better although the climate card not updating.

1 Like

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

Thx, worked!

But why didn’t it work with adjusted pathes? Just curious (HA newbie).