Caule Themes Pack 1 - by caulecriativo.com

[xXMariusXx (Marius)]

Awesome themes, but the subtitle is a bit too dark in the “black” themes.
How can I change this?

Also it’s very hard to see the disabled buttons:

[stban1983]

@xXMariusXx

Awesome themes

I just discovered this themes, they are great!
I’m having the same problem for the dark text.
Simply edit the caule-themes-pack-1.yamland modify the “# Text colors” section

[xXMariusXx (Marius)]

Great!
Any Idea how to change to notification badge text color?

[Emile6000]

You have to replace ‘secondary-text-color’ value to whatever color you prefer in the caule-themes-pack-1.yaml

[jimmng (jimaiwr)]

Kinda noob here… but, how do you get light switches like the ones on the top row?

[duceduc]

Nice looking set of icons. Will try when get the chance.

[jackbcain]

Hello. Thanks for the theme!
I’m doing a couple of simple modifications but there comes a point where I get stuck …
I have changed the color of the icons when the entities are not available (to red) and the general color of the icons (to the main color) and when the entities are active (white)

Icons colors

state-icon-color: var (- primary-color)
state-icon-active-color: “# e5e5e5”
state-icon-unavailable-color: “# f50000”

***My first problem: how could I modify the background of the buttons so that, for example, if I turn on the fan (state = on) the background of that button is as primary-color instead of the gray background?

Thanks for the help

[leonardus (Leonardo)]

HI! thank you for a beautiful themes!
with the last update there is some problem with “red color”. see attachments.
how can I resolve?
thank you!

[DaveCB (Dave Bruner)]

Hi All
I have gone back through the install a few times and everything looks correct, but its not working. I am seeing this in the Log. Any Ideas of where I should look?

[MaxVRAM]

@leonardus You can create a custom theme for the gauge card. For example:

#config/themes/gauge_theme.yaml

Gauge Theme:
  info-color: "#008ae6"
  success-color: '#80C884'
  warning-color: '#EA8016'
  error-color: '#c3423f'

Adjust the colours as desired, then restart HA core and apply the theme to your gauge card theme option.

[MaxVRAM]

I’ve added day/night automations and individual input selectors for base colour and day/night theme style variations. Thought I’d share it here.

Caule Theme Day/Night automation & Selector

• Provides a simplified colour input selector, containing just the core colours.
• Automation between day and night based on the sun being above/below the horizon.
• Allows theme variation for day/night independently: light, dark, black and black glass.
• Node Red is no longer required.

How to implement

Simply replace the content suggested by @orickcorreia in his automatic theme selector setup guide with content for the following files:

input_select.yaml

# Base theme colour
theme_colour:
  name: "Theme Colour"
  icon: mdi:palette
  initial: Coral
  options:
    - Rose
    - Purple
    - Blue
    - Aqua
    - Green
    - Yellow
    - Orange
    - Coral
    - Pink
    - Gray
# Theme style during the day
theme_day:
  name: "Theme Day"
  icon: mdi:weather-sunny
  initial: Light
  options:
    - "Light"
    - "Dark"
    - "Black"
    - "Black Glass"
# Theme style during the night
theme_night:
  name: "Theme Night"
  icon: mdi:weather-night
  initial: Dark
  options:
    - "Dark"
    - "Black"
    - "Black Glass"
    - "Light"

automations.yaml

- alias: Theme Change
  id: 978e51847fce4332a9825bf71516a2fd
  initial_state: true
  trigger:
    - platform: homeassistant
      event: start
    - platform: state
      entity_id:
        - sun.sun
        - input_select.theme_colour
        - input_select.theme_day
        - input_select.theme_night
  action:
    - service: frontend.set_theme
      data_template:
        name: >
          {% if states('sun.sun') == 'above_horizon' %}
            {% if states('input_select.theme_day') == 'Light' %}
              Caule Light {{ states('input_select.theme_colour') }}
            {% elif states('input_select.theme_day') == 'Dark' %}
              Caule Dark {{ states('input_select.theme_colour') }}
            {% elif states('input_select.theme_day') == 'Black' %}
              Caule Black {{ states('input_select.theme_colour') }}
            {% else %}
              Caule Black {{ states('input_select.theme_colour') }} Glass
            {% endif %}
          {% else %}
            {% if states('input_select.theme_night') == 'Light' %}
              Caule Light {{ states('input_select.theme_colour') }}
            {% elif states('input_select.theme_night') == 'Dark' %}
              Caule Dark {{ states('input_select.theme_colour') }}
            {% elif states('input_select.theme_night') == 'Black' %}
              Caule Black {{ states('input_select.theme_colour') }}
            {% else %}
              Caule Black {{ states('input_select.theme_colour') }} Glass
            {% endif %}
          {% endif %}

Lovelace card example

type: entities
show_header_toggle: false
title: Theme Settings
entities:
  - entity: input_select.theme_colour
  - entity: input_select.theme_day
  - entity: input_select.theme_night

[HorizonKane]

Hi all,

I installes through HACS and the scene is running, but I can see no backgrounds. Anybody else? Did I miss anything?

[HorizonKane]

Hm, I got this problem with all themes I install through hacs - no backgrounds are displayed. Anybody had this problem, too?

Edit: Just noticed, that this is working on my iPad in the iOS App the background is displayed, on my Android devices not. However I think its not a problem with this theme, so Im going to create a new thread.

[tonesto7 (Anthony S)]

You are not alone… It behaves the same for me…

[Koepert]

Got a weird problem with this theme. I noticed i’m not using it very frequently. So decided to delete it.

It Should be: Sidebar - HACS - Select CAULE - Uninstall. But that doesnt seem to work. Theme stays there, even after a restart. Also tried to manually remove the theme, (throw away the files) but still the GUI refers to it.

[jankete]

Hi. I installed the theme pack via HACS. Switching the themes workes fine, but I don’t get any backgrounds. I also tried to copy the files into “/config/www/caule-theme-pack-1/backgrounds” without success.

[DirkStorck (DST73)]

Hi,
just installed this theme pack using HACS. Work fine so far and looks really great. Only have some visual problem when it comes to editing for example yaml’s of card

Things are really hard to read an I have to copy the text to an external editor so I can see something.
Did I do something wrong?

Thanks!

[Bobb]

This seemed to be a problem for a long while. There was an issue on the github pages (Issues · orickcorreia/caule-themes-pack-1 · GitHub) and that is where I took my solution from. Add the following to the end of each theme:

# New

  mdc-text-field-fill-color: var(--ha-card-background)
  mdc-text-field-ink-color: var(--primary-text-color)
  mdc-select-fill-color: var(--ha-card-background)
  mdc-text-field-label-ink-color: var(--secondary-text-color)
  input-fill-color: var(--ha-card-background)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--primary-text-color)
  input-disabled-fill-color: var(--ha-card-background)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-label-ink-color: var(--disabled-text-color)
  input-idle-line-color: var(--primary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-hover-line-color: var(--primary-color)
  code-editor-background-color: var(--secondary-background-color)
  codemirror-property: var(--accent-color)

[DirkStorck (DST73)]

Where did you put this? What do I have to change? Thanks!

[Bobb]

Open your code editor of choice and you should find

/config/themes/caule-themes-pack-1/caule-themes-pack-1.yaml

Scroll down to the end of the first theme (mine is Caule Black Rose) and it should end with #HACS and a few lines of yaml. Add the new text at the end. Repeat for all other themes, or the one(s) you want to use.

Restart HA and it should work…