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') }}'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
Would love to do that as well!
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.
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
My best effort so far …
Drop-down the list of themes
Starting at the end of the last theme name and click down and drag to the top of the list
Ctrl-C
Paste into MS Word
Search and replace...
Ctrl-H
Search: ^p
Replace: @,@
Edit start by adding:
{{ [@
Edit end by adding:
] | random }}
Select all and copy
Ctrl-A
Ctrl-C
Paste into notepad
Search and replace
Ctrl-H
Search: @
Replace: '
Select all and copy
Ctrl-A
Ctrl-C
Back to HA and create the following:
theme_set:
alias: Theme Set
sequence:
- data_template: >
<paste into here>
service: frontend.set_theme