Caule Themes Pack 1 - by caulecriativo.com

Tags: #<Tag:0x00007f73977a10e0>

Caule Themes Pack 1 - by caulecriativo.com

hacs_badge
ha brasil
ha brasil discord
homeassistant_community

Github Stars
Github Follow

Created by Ricardo Correia for the Home Assistant BraZil community.

  • 10 modern colors;
  • 4 categories of styles;
    • Black Glass
    • Black
    • Dark
    • Light
  • 40 themes in total;
  • Animated icons for the weather forecast card;
  • And a bonus automatic theme selector for your interface.

I want to ask only 2 things for those who benefit from these themes:

  1. Contribute to my work! Buy Me A Coffee
  2. Follow my creative studio on instagram: caulecriativo.com

Make good use of themes :slight_smile:










Animated icons included


If you STILL DON’T have the “themes” folder

You need to configure your configuration.yaml file, adding the code below for your Home Assistant to search for themes in the themes folder:

frontend:
  themes: !include_dir_merge_named themes

ATTENTION! It is necessary to restart after this configuration!

Installation via HACS (Home Assistant Community Store)

(If you are not HACS) Learn how to install

  • Go to the HACS Community Store
  • Click on the “Frontend” option
  • Click on the (+) button
  • Search for "Caule Themes Pack"
  • Click "Install"
  • Restart your Home Assistant

Manual installation

Then download the caule-themes-pack-1.yaml clicking here and copy the file to your themes folder.

If your themes folder does not yet exist, you must create it within the config folder.

Download backgrounds and icons (only required for manual installation)

10 of the 40 themes have backgrounds and all themes use animated icons for the weather forecast card. These files need to be downloaded and copied to your Home Assistant server.

  1. Download the backgrounds and icons clicking here.
  2. Extract the file .Zip
  3. Copy the folder caule-themes-pack into the folder config/www/. The final path to the file folder should be config/www/caule-themes-pack-1/

*ATTENTION! If your www folder does not yet exist, create it within the config folder. *

Now restart your Home Assistant and the themes will be available for use.



Creating an automatic theme selector for the interface (optional)

We will create a theme selector to be implemented in your user interface. It is a practical way to change the theme instantly on all devices connected to your Home Assistant. See how it works in the gif below:

1st Step - Creating the input_select

The input_select will be used to create the selection list with the themes that I created.

Insert this code into your file configuration.yaml

If you’ve never used input select, learn more by clicking here.

input_select:

  themes:
    name: 'Themes'
    icon: mdi:format-paint
    options:
      - Caule Black Rose
      - Caule Black Purple
      - Caule Black Blue 
      - Caule Black Aqua
      - Caule Black Green
      - Caule Black Yellow
      - Caule Black Orange
      - Caule Black Coral
      - Caule Black Pink
      - Caule Black Gray
      - Caule Dark Rose
      - Caule Dark Purple
      - Caule Dark Blue 
      - Caule Dark Aqua
      - Caule Dark Green
      - Caule Dark Yellow
      - Caule Dark Orange
      - Caule Dark Coral
      - Caule Dark Pink
      - Caule Dark Gray
      - Caule Light Rose
      - Caule Light Purple
      - Caule Light Blue 
      - Caule Light Aqua
      - Caule Light Green
      - Caule Light Yellow
      - Caule Light Orange
      - Caule Light Coral
      - Caule Light Pink
      - Caule Light Gray
      - Caule Black Rose Glass
      - Caule Black Purple Glass
      - Caule Black Blue Glass 
      - Caule Black Aqua Glass
      - Caule Black Green Glass
      - Caule Black Yellow Glass
      - Caule Black Orange Glass
      - Caule Black Coral Glass
      - Caule Black Pink Glass
      - Caule Black Gray Glass      
      - default

Restart your Home Assistant so that the input_select is created.

Result:

  • input_select.themes

2nd Step - Theme selector automation

Attention! This automation is available in two methods. Choose only one method.

Method 1) Native Automation of Home Assistant with YAML

Copy the code below and paste it into your file automations.yaml

- alias: "set Themes - by caulecriativo.com"
  initial_state: true
  trigger:
    platform: state
    entity_id: input_select.themes
  action:
  - service: frontend.set_theme
    data_template:
      name: >
        {{ trigger.to_state.state }}

Method 2) Automation with Node-RED

WARNING! If you’ve never used Node-RED, learn more by clicking here.

We will create a flow in Node-RED to define the theme automatically every time you choose a theme in your interface. It’s very simple! Just download the .json file or copy the code and paste it into the Node-RED import window.

Click here to copy or download the code for Node-RED flows

After importing the flow to your Node-RED, click Deploy

3rd Step - Implementing the selector in your interface

Now just insert the selector code in your interface.

  • If you use the interface in YAML Mode, copy the code and insert it into your ui-lovelace.yaml
  • If you use the interface in automatic mode, go to the editing mode of your interface, choose the “manual” option at the end, then copy and paste the code below.
  type: entities
  show_header_toggle: false
  entities:
    - entity: input_select.themes

4th Step - Configuring the “Backend-selected” theme

Change the theme in the user’s profile to “Backend-selected”. This way, all connected devices with the theme “Backend-selected” will have their themes changed synchronously with the theme selector you just created.

Now just enjoy it!

If everything goes well, send a print :slight_smile:

Buy me a coffee

Icons created by amCharts and modified by me.

12 Likes

Very nice. Will try them out. Good job!

1 Like

FYI, if you already have themes (as I do), you can put them all in a themes directory and then include them all at once with:

Copy to clipboard

frontend:
  themes: !include_dir_merge_named themes

(which is needed if you have themes installed via. HACS).

In this case, I created /config/themes/caulecriativo/ and downloaded the themes.yaml above into there.

1 Like

It is already updated and will soon be on HACS

1 Like

Very nice :clap: :clap:

1 Like

is there something i need to do to get the default to come back when i select default?

1 Like

Did you create the theme selector?

In the configuration.yaml i had to change Default to lower case when i used the guide to creating the theme selector to get the default theme to work.
I also had to check “render templates in data” in the “set theme” tile in node red.
Those were the two small snags i hit when installing this yesterday.

1 Like

This looks great, but unfortunately I cant get it to work.

I Installed via HACS.
I already had a themes folder and a !include path in config
I created the input_selector
I changed theme to backgend_selected
and restarted home assistant.

I created the input selector in Lovelace and can select different themes from Lovelace but the themes are not changing - any ideas where Ive gone wrong please.

1 Like

I had doubts about your question.

  1. Did the themes load? Is it possible to apply my themes in the profile menu?
  2. Did you import the automation into Node-RED?

Got it. But the Node-RED template seeks the value of input_select. You will only have problems if you change the name of the input_select.themes, as it is exactly in this entity that Node-RED will extract the value.

The themes can be applied via the profile menu and I haven’t installed the automation into Node-RED, would that be the issue here.

PS I have just re read the instructions and didn’t realise NodeRED was required, I install that now. Thank you for your prompt reply.

1 Like

I’ve double checked all names and entries (all copy pasted from the instructions above)
debugged the payload outputted by the “set themes” node. i can’t see any difference in the output if i have “render templates” ticked or unticked. HOWEVER when it is ticked everything works as expected, if its not ticked i can see node red do its thing but no theme changes in Hass.
its not a problem for me since i got it to work, just thought i should put it here if someone else faces this problem.

and btw, I LOVE your work! especially black blue glass :smile:

This is awesome! Will give it a try. Thank you! :+1:

I was having some issues where my lovelace dashboards would take a second or two to load. I think it had to do with the background images. After changing the theme to use a radial-gradient instead of the image url, they pages loaded much faster for me. Very nice themes though! I’m wanting to create new “Glass” versions for the light themes though.

Hi there,

Just installed your themes. Really cool looking. I am not planning to use Node Red for now and tried to select the theme in the user profile. It shows \me all the themes, allows me to select one but then nothing happens, theme is still looks like the previously selected one.

Thought ?

Have you restarted?

Duh :slight_smile:, you’d think I would have known that :slight_smile:

Works like a charm, thanks

Since the installation of these themes I see something strange… when I try to pick some particular themes from the input_select, Home Assistant asks for a password??? Even more strange is that some themes trigger the password pop-up and some don’t while I use just 1 automation…
I don’t know the password. The password I use in Home Assistant doesn’t work.

Ok…it has to do with Chrome. No problems in the mobile app.

Did you install via HACS or manual method?
Call me on telegram: https://t.me/orickcorreia