Sun Card

Home Assistant Lovelace card to present current sun elevation. Requires sensors providing UTC time and sun elevation at least to work properly. It provides visual information about current sun elevation throughout the day, time of sunrise/sunset/noon, daylight duration and time to sunset. Available data depends on used Sun component: pre-existing one from Home Assistant (Basic), extended available here (Extended) or leverage Sun2 extension available here. Additionally it can depict current moon phase using sensor.moon from moon platform.

Capabilities

Used Sun component	Current sun elevation	Sunrise	Sunset	Noon	Daylight duration	Time to sunset
Basic	☀️	Only future	Only future	🌑	🌑	☀️
Extended	☀️	☀️	☀️	🌑	☀️	☀️
Sun2	☀️	☀️	☀️	☀️	☀️	☀️

You have to have mentioned monitored_conditions enabled in component:

for Extended sun component: elevation, max_elevation, sunrise, sunset

for Sun2 component: sunrise, sunset, solar_noon, max_elevation

The card depicts current moon phase if you have defined moon_phase entry in card configuration.

From version 4.x, the card accepts entities from "sensor" domain for given capabilities. See "Options" for detailed instructions.

Options

Card options:

Name	Type	Requirement	Default value	Description
type	string	Required	`custom:sun-card`	Type of card, non-modifiable
name	string	Optional	Language specific	Card name visible in header, no header when empty value
meridiem	boolean	Optional	Language specific	Clock format: 12h or 24h
animation	boolean	Optional	true	Turn on/off sunbeam animation
entities	Object	Optional	-	Allows defining entities providing required data

Entities options:

Name	Default entity	Entity state type	Description of entity state value
time	sensor.utc_time	string in format hh:mm	current UTC time
elevation	sun.sun	number	current sun elevation
max_elevation	-	number	maximum elevation today
sunrise	-	time with timezone	today's sunrise time
sunset	-	time with timezone	today's sunset time
noon	-	time with timezone	today's noon time
moon_phase	-	string	moon phase (refer to moon sensor for possible values)

Themes

You can simply change default style of the card specifying CSS variables in your theme:

Variable	CSS Attribute	Purpose
--sc-background	background	Background of the viewport
--sc-background-auxilary	background	Additional background of the viewport; with regular background let you define backgrounds for day and night
--sc-background-filter	filter	Allows adjustment of the backgrounds
--sc-sun-color	stroke	Sun fulfillment color
--sc-sunbeam-color	stroke	Sunbeam stroke color
--sc-sun-night-color	stroke	Sun stroke color when being below horizon
--sc-sun-size	stroke-width	Sun size in pixels, default to 60px
--sc-event-line-color	stroke	Sunrise, noon and sunset timestamp markers color
--sc-horizon-color	stroke	Horizon line color
--sc-moon-color	fill	Moon fill color
--sc-elevation	none	CSS variable of number in range -1..1 that equals how high the Sun is currently related to it's maximum position

Tip: define different backgrounds for day and night period:

You may define --sc-background for day period and --sc-background-auxilary for night period. To display them exclusively you may leverage alpha compound and calculate its value using current --sc-elevation value, ie. in theme file:

--sc-background: rgba(255, 0, 0, calc(10000 * var(--sc-elevation))) (alpha compound capped to 1 for elevation > 0)

--sc-background-auxilary: rgba(0, 0, 255, calc(-10000 * var(--sc-elevation))) (alpha compound capped to 1 for elevation < 0)

Installation

HACS (recommended)

Make sure the HACS component is installed and working.
Add this github repository https://github.com/mishaaq/sun-card as custom plugin repository in HACS settings.
Install the plugin Sun card and update lovelace configuration accordingly.

Installation and tracking with `custom_updater` (deprecated)

Make sure the custom_updater component is installed and working.
Configure Lovelace to load the card.

resources:
  - url: /customcards/github/mishaaq/sun-card.js?track=true
    type: module

Run the service custom_updater.check_all or click the "CHECK" button if you use the tracker-card.
Refresh the website.

Manual Installation (not recommended)

Download the sun-card
Place the file in your config/www folder
Include the card code in your ui-lovelace-card.yaml

title: Home
resources:
  - url: /local/sun-card.js
    type: module

Write configuration for the card in your ui-lovelace.yaml

Examples

type: 'custom:sun-card'
name: Sun
meridiem: false
entities:
  max_elevation: sun.sun
  sunrise: sensor.sunrise
  sunset: sensor.sunset
  noon: sensor.solar_noon
  moon_phase: sensor.moon

spencermamer/sun-card