Home Assistant Config

Partial Home Assistant configuration with themes, templates and views

Status of: 2019.08.13

My config is heavily based on custom Lovelace cards, themes and decluttering templates.

Hemera and Nyx themes

I'm using two themes, Hemera (Day) and Nyx (Night).

These themes support of course Home Assistant but also some Lovelace components

It has built-in support for the following custom components:

• The custom thermostat card
• The custom simple weather card
• The awesome custom button card
• The great custom mini graph card
• The custom air visual card

How does it look like?

The below screenshots show some mobile examples of the day and night theme, and the custom components side by side.

Hemera 01 day theme

Based on the Hemera 01 light grey/orange/blue day theme:

Nyx 01 night theme

Based on the Nyx 01 black/orange/blue theme:

Nyx 03 night theme

And the fully Teal Green Nyx 03 teal/teal/teal theme:

Relation between theme, decluttering templates and views/cards

The theme, templates and cards are related in the sense that the template is using the theme settings, and the cards the template settings, ie: theme --> template --> cards.

Below a light button example for the state "On"

The theme defines the colors:

#
# Entity state = 'on'

theme-button-card-color-state-on:          'rgba(255, 255, 255, 1.0)'
theme-button-area-color-state-on:          'var(--primary-text-color)'
theme-button-icon-color-state-on:          'var(--paper-item-icon-active-color)'
theme-button-label-color-state-on:         'var(--mdc-orange-darken-4)'
theme-button-lock-color-state-on:          'var(--primary-text-color)'
theme-button-name-color-state-on:          'var(--primary-text-color)'
theme-button-state-color-state-on:         'var(--mdc-orange-darken-4)'

The template for the custom button-card implements the theme colors/settings for the state "On"

  state:
    - value: "on" 
      spin: '[[spin]]'  
      styles:
        card:
          - --ha-card-background: var(--theme-button-card-color-state-on)
        lock:
          - color: var(--theme-button-lock-color-state-on)
        label:
          - color: var(--theme-button-label-color-state-on)
        name:
          - color: var(--theme-button-name-color-state-on)
        state:
          - color: var(--theme-button-state-color-state-on)
        custom_fields:
          area:
            - color: var(--theme-button-area-color-state-on)

The cards need very little yaml code as a result, only functional stuff, NO styling!

          - type: custom:decluttering-card
            template: button_light_template
            variables:
              - entity: light.gledopto
              - area: Woonkamer
              - name: Boekenkast
              - icon: 'mdi:book-open-outline'

As a result:

• the cards need very little yaml, and only contain the functional stuff
• the template takes care of defaults and styling
• the theme is the only one responible for the style settings

Inspired by...

Of course, I did not re-invent the wheel. Hemera and Nyx, together with the 3-grid layout and on/off colors are heavily inspred by Apple's HomeKit and the mighty HomeBridge UI.

Homekit:

Homebridge:

Last but not least: Google's material design, inclusing design rules:

• https://materializecss.com/color.html
• https://material.io/design/color/#color-usage-palettes
• https://material.io/design/color/dark-theme.html

And last last but not least: the 3 button topmenu by @jimzz