[feature addition] Day/night automation with base colour and style input selectors (code supplied)

[MaxVRAM]

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

[ricardoquecria]

I updated mine too! I choose the color and whether it will be light or dark. I did this before Home Assistant had the option to automatically change the theme color depending on the time. Usage node-red =)

I'm thinking of updating this way of selecting from the frontend