Manual Dark & Light Themes

[beauwest]

Hey there Madelena!

I love this theme, but it currently doesn't support a scenario that I use themes for.

I have a wall-mounted panel that I use with a basic automation to set the theme to a dark theme, or a light theme, depending on the time of the day. Unfortunately, at this time, Home Assistant doesn't allow me to choose a manual mode for the theme using frontend.set_theme. The mode option for that only allows me to set the theme for a particular device mode, so the device itself would have to change between light and dark mode, and I don't have that ability.

Most themes seem to work around this by just having two separate themes. A dark theme (Metrology Dark) and a light theme (Metrology Light), and then each of the themes can have their multiple color palettes. Some themes even go further and provide a 3rd theme that is combined theme, so all of the Home Assistant "mode" stuff works as well.

I completely understand if that's outside of the scope of what you want to do, but I thought I'd throw this information out there and provide another use case for how themes might get used!

Great work, by the way!

The basic automation, looks something like this.

  - id: wall_panel_set_theme
    alias: "Wall Panel: Set Theme"
    trigger:
      - platform: homeassistant
        event: start
      - platform: state
        entity_id: binary_sensor.wall_panel_should_be_light_theme
    action:
      - service: frontend.set_theme
        data:
          name: >
            {% if is_state('binary_sensor.wall_panel_should_be_light_theme', 'on') %}
              Metrology Light
            {% else %}
              Metrology Dark
            {% endif %}
      - service: button.press
        target:
          entity_id: button.fire_tablet_load_start_url

[Madelena]

Thank you! ☺

Luckily, the way this theme is coded is rather different from other themes because it uses YAML anchors, which makes it easy to create new color variations... For now, I guess an easy hack would be to add something like this at the end of the file:

Metro Orange Dark:
  modes:
    dark: *metro-common-dark
    light: *metro-common-dark
  ...

Metro Orange Light:
  modes:
    dark: *metro-common-light
    light: *metro-common-light
  ...

Perhaps we should also send the HA dev a feature request for a new service for frontend.set_mode too.

[beauwest]

I went digging, and found that there's been similar issue reports. I added some notes to them!

Thank you!

[Madelena]

Glad it helps! Hope the temporary solution works too.