A fully dark Teal theme based on Nyx
Nyx is an extended night theme, supporting several custom components. Nyx, the goddess of the night, has a counterpart named Hemera, the goddess of the day.
This theme is build on Home Assistant 0.96.5 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 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
The main colors, based on the Material Design Color Palettes are:
- Almost Black Teal for backgrounds
- Teal as Primary Color
- Teal as the Secondary Color
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent