Partial Home Assistant configuration with themes, templates and views
My config is heavily based on custom Lovelace cards, themes and decluttering templates.
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
The below screenshots show some mobile examples of the day and night theme, and the custom components side by side.
Based on the Hemera 01 light grey/orange/blue day theme:
Based on the Nyx 01 black/orange/blue theme:
And the fully Teal Green Nyx 03 teal/teal/teal theme:
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
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.
