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.js
file from the latest release available and save it in yourconfiguration/www
folder. - Go to
Configuration > Lovelace dashboard > Resources
in Home Assistant and click onAdd resource
.- Add
/local/community/home-assistant-sun-card.js
to the URL. - Choose
Javascript Module
as Resource type.
- Add
- Go to your dashboard, enter in edit mode and click on
Add card
, you should be able to findCustom: Sun card
in 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 | string 1 |
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