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

Feature Requests
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” ?

87

Oh yes, I see… Actually I don’t have any badges, so I forgot it in my themesetup… Thanks for letting me know :slight_smile:

88

2 posts were split to a new topic: Dark Cyan Theme

89

There’s already a ‘default’ theme selection that allows it to revert back to blue/white

91

These themes are bomb. Added a few to my setup. Thanks much for sharing!

1 Like
92

Midnight is amazing :smiley:

93

Hello all and thanks for all the nice themes you’ve created.

Is is possible to also increase the size of different elements, or perhaps there is a setting to magnify the whole UI by a factor of, let’s say, 1.3x?

95

It is possible to change also icons on the setting menu at left?

96

Here’s a script I use when working on groups, automations and themes so I don’t have to constantly restart HA. Just put script.reload somewhere where its easy to activate on your frontend.

  reload:
    sequence:
      - service: automation.reload
      - service: homeassistant.reload_core_config
      - service: frontend.reload_themes
2 Likes
97

Hi @Jer78,

Sounds interesting, can you let me know where this would be placed, is it part of an automation, or is “reload” a component i haven’t heard of…

Assuming it get triggered as part of a input select or a button click?

Thanks