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

[Klex1404]

The cyan one please.
(Perfect weer vandaag om zoiets te doen )

[synth3tk]

I’m also interested in the red one! That looks amazing.

[NotoriousBDG]

Any idea which setting controls the colors of these URLs? I need to set them to a lighter (readable) color when using a dark theme.

[ahs]

I’m afraid this one hasn’t been set yet… We could set the default <a> styling in src/layouts/home-assistant-main.html, I suppose, in a next pull request. Currently since it is not set it falls back to your default browser value (in most cases blue for unvisited links and purple for visited links).

[arsaboo]

See frontend docs here

[fvargasfrank (Frank Vargas)]

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

[broesie (Ryoen Deprouw)]

Can you send me a screenshot?

[ahs]

@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
.

[j.assuncao (Jorge Assunção)]

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!

[forsquirel]

You have to select it from the configuration panel

[Klex1404]

This will help:

Home Assistant Frontend

[DPB61 (Dave)]

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.

[ahs]

@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'

[forsquirel]

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.