Home assistant Sun card based on Google weather design
- This card uses Sun integration so it needs to be enabled
Home assistant Sun card is available by default on HACS directory. More info here.
- Download the
home-assistant-sun-card.jsfile from the latest release available and save it in yourconfiguration/wwwfolder. - Go to
Configuration > Lovelace dashboard > Resourcesin Home Assistant and click onAdd resource.- Add
/local/community/home-assistant-sun-card.jsto the URL. - Choose
Javascript Moduleas Resource type.
- Add
- Go to your dashboard, enter in edit mode and click on
Add card, you should be able to findCustom: Sun cardin the list. - Once in the UI editor you can modify the card behavior by adding some of the config that you will find below
Note: If Custom: Sun card doesn't appear you will have to reload cleaning the cache.
- You just need to add a new card with
type: 'custom:sun-card'to your cards list and any of the config that you will find below if you want to customize more your card.
Note: If you get an error similar to this Custom element doesn't exist you will have to reload cleaning the cache.
| Name | Accepted values | Description | Default |
|---|---|---|---|
| darkMode | boolean |
Changes card colors to dark or light | Home assistant dark mode state |
| language | string1 |
Changes card language | Home assistant language or english if not supported |
| showAzimuth | boolean |
Displays azimuth in the footer | false |
| showElevation | boolean |
Displays elevation in the footer | false |
| timeFormat | '12h'/'24h' |
Displayed time format | Locale based on Home assistant language |
| title | string |
Card title | Doesn't display a title by default |
(1) Supported languages: da, de, en, es, et, fi, fr, hu, it, nl, pl, pt-BR, ru, sl, sv
- Home assistant seems to provide next events instead today's one

