"Dark" theme, or "night" mode/theme

Feature Requests
49

6 posts were split to a new topic: Orange Theme

53

6 posts were split to a new topic: Dark Red Theme

56

See frontend docs here

57

Thank you, I completely ignore the part where I have to actually set theme lol

59

Can you send me a screenshot?

61

2 posts were split to a new topic: Midnight Theme

63

@broesie

Can you send me a screenshot?

Sure. Here is what I meant. Using CustomUI labels in the card here but both of your background colours are similar so it should give the same effect. You could also use transparent instead of var(–secondary-background-color) which would make it look good against both background colours
.
Untitled

1 Like
64

5 posts were split to a new topic: Xiaomi Camera

69

I’m trying to change the theme with an input_select but i cant make it work. When i change the input the state variable changes but the theme never gets loaded.

My code is:

input_select:
  escolha_tema:
    name: Escolha um tema
    options:
     - Escuro - Azul
     - Claro - Laranja
    initial: Escuro - Azul
    icon: mdi:nintendo-switch

- alias: 'Temas'
  trigger:
    - platform: state
      entity_id: input_select.escolha_tema
    - platform: time
      minutes: '/1'
      seconds: 10
  action:
    - service: frontend.set_theme
      data_template:
        name_template: >
          {% if is_state("input_select.escolha_tema", "Escuro - Azul") %}
            escuro_azul
          {%-elif is_state("input_select.escolha_tema", "Claro - Laranja") %}
            claro_laranja
          {% endif %}

I’ve tried using frontend.reload_themes instead of frontend.set_theme but no luck. Does anyone knows the soluction for this??

Thank you!

71

You have to select it from the configuration panel

72

This will help:

73

Is it possible to have themes change automatically?

When I wake up before dawn it would be great to have the dark theme so my eyeballs aren’t burnt by the phone glare before I wake up properly. But after dawn the theme should go back to white background.

74

@j.assuncao, @bachoo786, @forsquirel, @DPB61: Here is my automation rule, based on changing an input select box manually and/or automatically. There are of course other ways of accomplishing this, but this works fine for me (and is pretty comprehensible).

Please note however that changing the theme in your configuration frontend UI overrides all of it. So better leave the frontend config (https://your.home.assistant/config/core) theme set to ‘backend-selected’.

frontend:
  themes: !include configuration_themes.yaml # your themes go in this file, or directly below here

input_select:
  hass_template:
    name: Choose template
    options:
     - default
     - day
     - night
    initial: day
    icon: mdi:theme-light-dark

automation:
  # IF: { input_select hass_template is changed by user OR home assistants boots up } THEN: { set theme to state given by input_select.hass_template }
  - id: switch_hass_template
    alias: switch_hass_template
    trigger:
      - platform: state
        entity_id: input_select.hass_template
      - platform: homeassistant
        event: start
    action:
      - service: frontend.set_theme
        data_template:
          name: "{{ states.input_select.hass_template.state }}"

  # IF: { sun.sun goes under horizon } THEN: { set theme to night mode }
  - id: day_to_night_theme
    alias: day_to_night_theme
    trigger:
      - platform: state
        entity_id: sun.sun
        from: 'above_horizon'
        to: 'below_horizon'
    action:
      - service: input_select.select_option
        data:
          entity_id: input_select.hass_template
          option: 'night'

  # IF: { sun.sun is up } THEN: { set theme to day mode }
  - id: night_to_day_theme
    alias: night_to_day_theme
    trigger:
      - platform: state
        entity_id: sun.sun
        from: 'below_horizon'
        to: 'above_horizon'
    action:
      - service: input_select.select_option
        data:
          entity_id: input_select.hass_template
          option: 'day'
2 Likes
75

2 posts were merged into an existing topic: Another Dark Theme

77

5 posts were split to a new topic: Another Dark Theme

81

when you enable themes there’s a dropdown list under configuration > configuration.yaml scroll to the bottom.

again, select the theme you want to use to apply it.

82

@ahs I’ll try it this weekend and give feedback. Thank you!

84

Yes indeed much more elegant solution. I will change my code aswell. Thanks

85

thanks a lot I managed to get it working when I select a theme.

86

Sorry if this is a silly question but if you change the Theme to another color how do you get back to the “normal” default colors? Is it as simple as saying

frontend.set_theme
      data:
        name: 'default'`

or do I need to define the color values back to the original by defining a Theme called “default” ?