Input_Select list of all available themes!?

The frontend supports themes. This category is for sharing themes.

i’m not even sure if this is has been requested or if it’s even an available option… but i’d like to create an input_select list of all available themes dynamically. i know you can select them manually… but i’d like to be able to have one for ‘day’ and one for ‘night’ and have them both populated with all themes and then you can just switch them when you want and the automation will change the theme based on time of day/sun/etc…

sure, here you go:

##########################################################################################
# Package Themes /config/packages/package_theme.yaml
##########################################################################################

#homeassistant:
#  customize:


##########################################################################################
# Groups
##########################################################################################

group:
  theme_selector:
    name: Theme selector
    icon: mdi:palette
    entities:
      - input_select.set_sunrise_theme
      - input_select.set_sunset_theme
      - sensor.sun_based_theme
      - automation.sun_based_theme_change
      - input_select.theme
##########################################################################################
# Sensors
##########################################################################################

sensor:
  - platform: template
    sensors:
      sun_based_theme:
        friendly_name: Sun based theme
        value_template: >
          {% if is_state('sun.sun','above_horizon') %}
           {{states('input_select.set_sunrise_theme')}}
          {% else %}
            {{states('input_select.set_sunset_theme')}}
          {% endif %}
        icon_template: >
          {% if is_state('sun.sun', 'above_horizon') %}
            mdi:weather-sunny
          {% else %}
            mdi:weather-night
          {% endif %}

##########################################################################################
# Inputs
##########################################################################################

input_select:
  theme:
    name: 'Select Theme'
    icon: mdi:palette
    options:
     - 'darkblue'
     - 'darkcyan'
     - 'darkorange'
     - 'darkred'
     - 'default'
     - 'done'
     - 'matrix'
     - 'midnight'
     - 'minimal'
     - 'PmxMononight'
     - 'stormy_hues'
     - 'teal'
     - 'vintage'
#    initial: 'teal'

  set_sunset_theme:
    name: 'Select Sunset theme'
    icon: mdi:weather-night
    options:
     - 'darkblue'
     - 'darkcyan'
     - 'darkorange'
     - 'darkred'
     - 'default'
     - 'done'
     - 'matrix'
     - 'midnight'
     - 'minimal'
     - 'PmxMononight'
     - 'stormy_hues'
     - 'teal'
     - 'vintage'
#    initial: 'darkblue'

  set_sunrise_theme:
    name: 'Select Sunrise theme'
    icon: mdi:weather-sunny
    options:
     - 'darkblue'
     - 'darkcyan'
     - 'darkorange'
     - 'darkred'
     - 'default'
     - 'done'
     - 'matrix'
     - 'midnight'
     - 'minimal'
     - 'PmxMononight'
     - 'stormy_hues'
     - 'teal'
     - 'vintage'
#    initial: 'minimal'

##########################################################################################
# Automations
##########################################################################################

automation:
  - alias: 'Change Current Theme'
    id: 'Change Current Theme'
    initial_state: 'on'
    trigger:
      platform: state
      entity_id: input_select.theme
    action:
      service: frontend.set_theme
      data_template:
        name: >
          {{states('input_select.theme')}}

  - alias: Sun based theme change
    id: 'Sun based theme change'
#    initial_state: 'on'
    trigger:
      - platform: homeassistant
        event: start
#      - platform: state
#        entity_id: input_select.set_sunset_theme
#      - platform: state
#        entity_id: input_select.set_sunrise_theme
      - platform: state
        entity_id: sensor.sun_based_theme
#      - platform: sun
#        event: sunrise
#      - platform: sun
#        event: sunset
#      - platform: state
#        entity_id: sun.sun
#        to: above_horizon
#      - platform: state
#        entity_id: sun.sun
#        to: below_horizon
    condition: []
    action:
#      - delay:
#          seconds: 3
      - service_template: frontend.set_theme
        data_template:
          name: >
            {{ states('sensor.sun_based_theme') }}
#            {% if trigger.platform == 'sun' %}
#              {{states('input_select.set_sunset_theme') if trigger.event == 'sunset' else 
#                states('input_select.set_sunrise_theme') }}
#            {% else %}
#              {{ states('sensor.sun_based_theme') }}
#            {% endif %}
      - condition: template
        value_template: >
          {{ is_state('input_boolean.notify_system', 'on')}}
      - service: notify.notify
        data_template:
          message: >
            {{ as_timestamp(now()) | timestamp_custom("%X") }}: 
            Sun is {{states('sun.sun')}} and Frontend is set to '{{ states('sensor.sun_based_theme') }}'
1 Like

but that doesn’t actually build the input selects with all the themes you have ‘built’ does it?

You need to have the themes defined , other than that, this is complete.

Not sure what you mean by ‘ build the input_selects’ ?

i was looking to dynamically have an automation build the input select options… i know there is a service to set them… but this way when you add/remove themes you could just have it rebuilt the options in the input select… but i don’t think this is possible at the moment as i don’t see anywhere it’s technically listing the themes

Ah I see, sorry I misunderstood.

Experience tells me the themes are fun while setting up and testing, and something like that would be interesting.

After having settled with the themes desired and having things exactly the way I want them, I havent looked at them at all, and the package above does all I need. Set the appropriate themes automatically based on sun state, and give me the option to override them whenever I need, also automated biased on the independent input_select.

How does the list in the user menu get generated? I’ve been trying to figure out how to replicate this so I can put it in a card

2 Likes

Would love to do that as well!

1 Like

Hey folks - not exactly what you’re looking for (re input_select) but thought I would share anyway. This script is tied to a button in my UI, and makes a service call, and assigns a random theme (which I had to manually define in the script - still no idea how to do this dynamically).

  theme_set2:
    alias: Theme Set2
    sequence:
    - data_template:
        name: '{{ ["Amoled - MOD", "Amoled - Teal", "Amoled - Blue", "Amoled - Green",
          "Light - Orange", "Light - Green", "Gray & Green"] | random  }}'
      service: frontend.set_theme

Has anyone figured out how to get a (dynamic) list of themes yet?

thats a very good question on the dynamic generation of themes. I see that there is no “get_theme” although there is a “set_theme” for the frontend service. May be we put this in the feature request?

I’ll poke around and see if it has been submitted already. As someone mentioned above, it clearly is already being generated (for the existing dropdown menu) but I cannot figure out how (or if) this is exposed to the user in a way we can use it.

Honestly, I would settle for knowing how to write a template to get the current theme being used! I’d like to put that template value in my button that calls the random theme script as a title so I know what the name of the theme is.

I made something similar to this a few weeks ago. I also wanted to use the built-in theme selector, but couldn’t find a way, so I made my own. Unfortunately, I have to manually update the list of themes, and a restart of HA is required, but it works for me and works well.

I have 3 options. 1 to change the theme, 1 for daytime theme, and 1 for the nighttime theme.

The 1st one to change the theme is more for if I get bored and want to change things around. The other 2 are pretty self explanatory.

Automations are also available to change as needed. One for the day/night cycle, and the other for when I use the first box to change the theme. The day/night automation will override this one.

This is my frontend. Make sure you have backend-selected in the built-in theme selector. The 2 toggles are to turn on/off the automations.

chrome_sThWiLH4eR

homeassistant:
  customize:
    package.node_anchors:
      theme_list: &theme_list
        name: Themes
        options: 
          - default
          - PmxMonolight
          - PmxMononight
          - clear-dark
          - default_v2
          - midnight
          - slate
        icon: 'mdi:palette'

    automation.system_auto_light_dark_theme:
      icon: 'mdi:theme-light-dark'

input_select:
  theme_switcher:
    <<: *theme_list
    name: Change Theme
    icon: 'mdi:palette'

  theme_daytime:
    <<: *theme_list
    name: Daytime Theme
    icon: 'mdi:white-balance-sunny'

  theme_nighttime:
    <<: *theme_list
    name: Nighttime Theme
    icon: 'mdi:weather-night'

#################################################

automation:
  - id: 'changetheme'
    alias: 'System - Change Current Theme'
    hide_entity: true
    trigger:
      - platform: state
        entity_id: input_select.theme_switcher
    action:
      - service: frontend.set_theme
        data_template:
          name: "{{states('input_select.theme_switcher')}}"

  - id: Themelightdark
    alias: 'System - Auto Light/Dark Theme'
    trigger:
    - event: start
      platform: homeassistant
    - platform: state
      entity_id: input_select.theme_daytime
    - platform: state
      entity_id: input_select.theme_nighttime
    - entity_id: sun.sun
      platform: state
      to: above_horizon
    - entity_id: sun.sun
      platform: state
      to: below_horizon
    action:
    - data_template:
        name: >
          {% if states.sun.sun.state == "above_horizon" %}
            {{ states.input_select.theme_daytime.state }}
          {% else %}
            {{ states.input_select.theme_nighttime.state }}
          {% endif %}
      service_template: frontend.set_theme