ricardoquecria / caule-themes-pack-1 Goto Github PK

Hi, first, thanks for the great theme.
I installed it via HACS automatically into folder themes/caule-themes-pack-1 with all background jpgs and animated icons.
Also the frontend entry in configuration.yaml is done. I can select the themes but there is no background visible and no weather icons at all. When I use "no theme" the standard weather icons are back.

Then I tried to copy the backgrounds and icons to ...www/caule-themes-packs-1/...as described, also no change.
And of course I made several reboots...

Hope you can help.

Since 2021.6, there is support for custom dark themes: https://www.home-assistant.io/blog/2021/06/02/release-20216/#support-for-custom-dark-mode-themes
Could this theme pack gain support for this? There would be a few advantages:

• dark themes inherit from the built-in dark theme, so if there is a new element added in a new version, it would have colors that at least somewhat matches the current theme
• it would be possible to automatically switch between dark and light theme variants, where the OS/browser supports it
• some custom integrations/lovelace cards try to detect dark theme and use different colors. Right now, they think all themes in this pack is light. Like this: https://github.com/AitorDB/home-assistant-sun-card, right now I have to manually set darkMode: true if I don't want black text on dark background, but that of course won't work if I need both dark and light theme support.

A minimal implementation would be wrapping all dark themes into modes: and dark:, this would fix the first and last item from my list, but it would create an annoying dark/light switcher in the UI, and if you select light, it will of course break. A proper implementation would be to have dark/light pairs, but right now there are 3 dark variants and only one light, so the single light one would have to be added to every dark one (yaml anchors/aliases can help here to avoid copy-pasting everything).

Hi,

today I noticed that one icon is missing in the package, but still in your yaml file:

weather-icon-exceptional: url("/hacsfiles/themes/caule-themes-pack-1/exceptional.svg")

See the 57% text here:

• Create hacs.jason
• Create info.md
• Update README.md
• Update docs (gifs, etc)

• Test with Custom repositories
• Pull request on HACS

That's due to this breaking change:
home-assistant/frontend#6377

Hi,

First of all I really really love this theme pack. I also like the way it's managed and handled (the looks for mobile devices).

My question is how can i create a title like the battery title in the picture on this git. And my second question is which card is the icon card? Since the ones from HassIO look kinda old and not fitting to the style.

My english may not be the best so I'm gonna try and do this with screenshots.

I currently have this:

But I'd like to have it look like this:

And how do i create title cards like these:

Is it possible to adjust the text color for Badges? Also, I noticed that when I go into EDIT mode, the color of the top bar matches the theme, but when I exit editing, it's light blue again. And I've already tried clearing the cache and everything. See below.

First of all @orickcorreia thank you so much for the beautifully crafted theme palette. I've taken the liberty to alter the way themes are selected from the front end and integrated day/night (light/dark) automation and input selectors, and thought I'd share it here.

I hope this helps someone, and @orickcorreia , feel free to implement this within your repository if you like.

Changes

• 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.

The theme.yaml stays the same, but replaces the suggested content for automations.yaml and input_select.yaml.

Front-end Input Selectors

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

Hello,

after the HA 2022.3 update the view when using Caule themes has changed. All input fields are now white, not following the theme.
This makes some fields unreadable.

I think, the theme has to be updated...

Can you please have a look in this?

Hey,
Loving the theme and have done for years now.
On the recent HA update the "on" state for my entities does not follow the Caule Theme.
They are now showing the standard lovelace yellow
I did notice that my fan entities do still follow the theme.
Is this a quick fix on your end?

• Links color
• Buttons color
• Codes color
• Backgrounds

Hello, I love your theme and use it in all of my Lovelace dashboards.

I do have one problem, which is with the background in a vertical-stack-in-card card when used in conjunction with the 'glass' themes.

Any cards in here have less of a transparency effect. If I use mini-media-player with the 'group: true' flag, it isn't a problem for those cards, but any other cards in the stack still have the problem. Please see below:

type: 'custom:vertical-stack-in-card'
title: Upstairs TV Control
cards:
  - type: 'custom:mini-media-player'
    entity: media_player.vizio_2
    info: scroll
    group: true
    hide:
      controls: true
      info: true
      volume: false
  - type: 'custom:mini-media-player'
    entity: media_player.upstairs_shield
    info: scroll
    group: true
    hide:
      source: true
      volume: true
  - type: entities
    entities:
      - script.upstairs_remote_finder

Since a while there was a version 1.3 that was working witht the latest HA versions, but this is now removed. If I downgrade, the Themes pack is not usable anymore.

https://github.com/orickcorreia/caule-themes-pack-1/blob/d17270772d731e995a790c2ddaf63e443a959448/src/caule-themes-pack-1.yaml#L1024

I was wondering if this is refering some functionality to automatically change background if images are placed here?

HACS reported an update of the Caule Themes Pack 1 available that would upgrade me from v1.3 to v1.2. After applying the update, Sensor Cards that were using the Caule theme no longer have colored graphs:

Oddly the throbber icons still show the correct Caule theme colors:

Reverting to v1.1 did no resolve the issue.

System Health

Hi,

The dark themes look awesome, thanks for those! In my opinion the text in the light themes give me the impression that the entities are disabled and a bit difficult to read.

My suggestion would be to make them a bit darker so they are more readable, what are your thoughts? :)

Hey Ricardo, tdo bem aí

Thanks for sharing your appreciated work with the community.

Not a bug, more an enhancement request. Please compress the bulky background jpgs to accelerate the media distribution. There is vast potential, see attachment.

All the best, Andi

It seems the red color in the native Gauge Card is following the theme color when setting severity.
Green and yellow are correct but not the red.
I think when you set severity values, the colors should match green, yellow, red.

thanks if this can be fixed or if you can tell me how i can fix this.

The following settings lets the themes fail to load. I'm using v0.9.4 of the graph card.

mini-media-player-background-opacity: 1
mini-media-player-artwork-opacity: 1

All users to add a caule-override.yaml file to override manual edits users (currently) make to caule-themes-pack-1.yaml
the override file would be designed to survive updates.

my work laptop, given to me by my corporate overlords, has HORRIBLE contrast ratio. not your fault... but...
on black theme: primary-background-color, divider-color, and disabled-color, cannot be distinguished between each other if there is sunlight shining into the room with the laptop.
same issue on Samsung Note 10 in direct sunlight... but yeah...

Needless to say, some users like to customize. an override file would help us do that.

Hi, can you add support for changing your beautiful wallpaper matching what is played in media player cover?

Can you please check the installation process via HACS?
Based on your tutorial I am not able to install themes correctly. Theme selector does not appear in the menu.
Please be so kind and check all of the 4 steps.
Home Assistant 2020.12.2

Greetings;

I am trying to install your theme pack, and after having downloaded the directory and rebooting, I've added the code to the configuration.yaml and am trying to reboot - but I keep getting this error message:

`
Logger: homeassistant.components.hassio
Source: components/hassio/init.py:383
Integration: Hass.io (documentation, issues)
First occurred: 12:49:42 PM (2 occurrences)
Last logged: 12:52:24 PM

Component error: themes - Integration 'themes' not found.`

Any idea why???

But also really every file ends with the suffix '.icloud'.
Is this intentional or is there a sync error?