Impostare i Temi su Home Assistant

Vedremo come personalizzare il nostro Home Assistant con nuovi temi e come personalizzarli per rendere HA unico ? .

Per configurare nuovi temi su Hass.io procedere in questo modo:
nel file configuration.yaml aggiungete sotto frontend:

 

Create ora nella sessa directory dove si trova il file configuration.yaml (ditectory /config) una cartella di nome themes  tutta minuscola.
All’interno scompattate e copiate i files yaml di esempio e raivviate.

 

Verrà creato una nuova voce sulle impostazioni del proprio profilo utente premendo sul cerchio a fianco della scritta Home Assistant in alto sinistra.

 

Importante i nomi di questi files non devono contenere spazi utilizzare il simbolo “_” tra una parola e l’altra.

 Se volete creare delle personalizzazioni copiate il tema che più vi piace e seguite lo schema che segue per le corrispondenze.

 

SCHEMA POSIZIONI ELEMENTI

 

 

 1 primary-color: “#e21453”
 2 disabled-text-color: “#803e52”

 3 divider-color: “#02c8e5”
_4 dark-primary-color: “#3d9018”

 5 primary-background-color: “#95391c”
 6 primary-text-color: “#3e600e”
 7 secondary-background-color: “#675335”
 8 secondary-text-color: “#600e57”
 9 text-primary-color: “#b280ad”

10 label-badge-background-color: “var(–primary-background-color)”
11 label-badge-text-color: “var(–text-primary-color)”

12 paper-card-background-color: “#3a500c”
13 paper-grey-50: “var(–text-primary-color)”
14 paper-grey-200: “#DDD4C8”
15 paper-item-icon-color: “#4a1e2a”
16 paper-listbox-background-color: “#7cb69a”
17 paper-listbox-color: “#3300ff”

18 paper-card-header-color: “#7c7cb6”

19 paper-item-icon-active-color: “#F7C02A”
20 paper-item-icon_-_color: “#FF00FF”

21 paper-slider-active-color: “#681096”
22 paper-slider-knob-color: “#7d6988”
23 paper-slider-knob-start-color: “#0f64a0”
24 paper-slider-pin-color: “#FF00FF”
25 paper-slider-secondary-color: “#A06020”

26 paper-toggle-button-checked-ink-color: “#cf4c68”
27 paper-toggle-button-checked-button-color: “#6b760c”
28 paper-toggle-button-checked-bar-color: “#bfd600”
29 paper-toggle-button-unchecked-bar-color: “#0018ff”

30 table-row-background-color: “#00ff18”
31 table-row-alternative-background-color: “#C67A2E”

32 sidebar-icon-color: “#ff0033”
33 label-badge-red: “#DF4C1E”
34 label-badge-blue: “#039be5”
35 label-badge-green: “#0DA035”
36 label-badge-yellow: “#f4b400”
37 label-badge-grey: “var(–paper-grey-500)”swqe

Legenda:
XX: impostazioni conosciute
XX: impostazioni sconosciute

Si possono impostare i colori in diversi modi:

esadeciamle: rgb:  rgba: con riferimento:

“#C67A2E” “rgb(76, 76, 76)” “rgba(0, 0, 0, .12)” “var(–primary-color)”

Qui troverete la tavola dei colori nei vari formati:

https://www.hexcolortool.com/

Qui alcuni esempi di temi:

https://community.home-assistant.io/t/share-your-themes/