Sun / Moon Position Card – another implementation

jayjojayson · December 22, 2025, 12:01am

Sun Position Card

This is a custom Lovelace card used to visualize the current position of the sun with various configuration options, as well as the current moon phase and the display of additional relevant solar times. The Card is translated into English and German. (github page).

You need the sun.sun entity provided by Home Assistant when your Home location is configured. The moon.phase entity is optional and only required to display the current moon phase.
To get the Moon sensor, go to Settings → Devices & Services → Add Integration and search for Moon. This is Home Assistant’s built-in Moon integration.

If you like the Card, I would appreciate a Star rating on my github .

Features

Sun Position – Classic Display
Sun Position – Calculated Display
Sun Position – Calculated Arc
Moon Phases – Visual Display (8 Phases)
Animated Sun Position
Customizable Times
Weather Status - NEW
Flexible Layout
Adjustable Thresholds
UI Configuration

Have a look at the animated card

Installation

HACS (Recommended)

Add this repository to HACS. To do so, use the following link.

The “Sun Position Card” should now be available in HACS. Click “INSTALL”.
The resource will be added to your Lovelace configuration automatically.

Manual Installation via Hacs

Open HACS in Home Assistant.
Go to “Frontend” and click the three dots in the top right corner.
Select “Custom repositories”.
Add the URL to your GitHub repository and select “Lovelace” as the category.
Click “ADD”.
The “Sun Position Card” should now be available in HACS. Click “INSTALL”.
The resource will be added to your Lovelace configuration automatically.

Manual Installation in HA

Manual Installation

Download the sun-position-card.js, sun-position-card-editor.js and the images folder from the repo in github.
Place the sun-position-card.js and sun-position-card-editor.js files and the images folder in config/www/community/Sun-Position-Card/. You will have to create the community and Sun-Position-Card folders.
Add the resource to your Lovelace configuration through the Home Assistant UI:
a. Go to “Settings” → “Dashboards”.
b. Click on the three dots in the top right corner and select “Resources”.
c. Click on “+ ADD RESOURCE”.
d. Enter /local/community/Sun-Position-Card/sun-position-card.js as the URL and select “JavaScript Module” as the Resource type.
e. Click “CREATE”.
Restart Home Assistant.

Configuration

Although the UI configuration is recommended, the card can also be configured manually using the YAML editor:

Options

name	typ	required	description	standard
`type`	`string`	Yes	`custom:sun-position-card`
`entity`	`string`	Yes	Die Entität Sonne, normalerweise `sun.sun`.
`moon_entity`	`string`	No	Die Entität Mond, normalerweise `sensor.moon_phase`.
`moon_phase_position`	`string`	No	Position Text Mondphase im Verhältnis zum Bild.	`above`, `in_list`
`times_to_show`	`list`	No	Eine Liste von Zeiten, die angezeigt werden sollen.	`daylight_duration, next_rising`, `next_setting`, `next_dawn`, `next_dusk`, `next_noon`, `next_midnight`
`time_position`	`string`	No	Position der Zeitangaben im Verhältnis zum Bild.	`above`, `below`, `right`
`time_list_format`	`string`	No	Format der Zeitangaben Blocksatz oder Zentriert	`block`, `centered`
`state_position`	`string`	No	Position des aktuellen Status (über dem Bild, in der Time-Liste).	`above`, `in_list`
`show_degrees`	`boolean`	No	Zeige Gradzahlen für Azimuth und Elevation.	`true`, `false`
`show_degrees_in_list`	`boolean`	No	Zeige Gradzahlen in der Timeliste.	`true`, `false`
`show_dividers`	`boolean`	No	Zeige Trennlinien zwischen den Zeiten.	`true`, `false`
`animate_images`	`boolean`	No	Animiere die Sonnenstandsbilder.	`true`, `false`
`view_mode`	`string`	No	Ansichtsoption klassich mit Bildern oder berechneter Sonnenstand.	`classic`, `calculated`, `arc`
`morning_azimuth`	`number`	No	Azimut-Grenzwert für den Morgen.	`150`
`noon_azimuth`	`number`	No	Azimut-Grenzwert für den Mittag.	`200`
`afternoon_azimuth`	`number`	No	Azimut-Grenzwert für den Nachmittag.	`255`
`dusk_elevation`	`number`	No	Höhen-Grenzwert für die Dämmerung.	`10`

simple example:

type: custom:sun-position-card
entity: sun.sun
times_to_show:
  - next_rising
  - next_setting
time_position: right
show_image: false

advanced example:

type: custom:sun-position-card
entity: sun.sun
moon_entity: sensor.moon_phase
moon_phase_position: above
state_position: above
show_dividers: true
show_degrees: true
show_degrees_in_list: false
times_to_show:
  - next_rising
  - next_setting
  - daylight_duration
  - moon_phase
time_position: right
show_image: true
morning_azimuth: 155
dusk_elevation: 5
noon_azimuth: 200
afternoon_azimuth: 255
animate_images: false
time_list_format: block
view_mode: arc

| | | | |

jayjojayson · December 28, 2025, 1:32pm

Hi everyone, I hope I have found the bug causing the cache issue in my other card and fixed it in the new release. After updating, all fields should now be available in the card editor (you might need to clear the cache as usual).

In the new version v_1.5 I have also implemented the weather, as promised. You can view the weather status in the timeline or place it as a badge on the main image. Additionally, the calculation for the sun’s position in the large view mode (when the timeline is displayed below the sun position image) has been corrected. The sun now moves precisely along its arc there as well.

I look forward to your feedback and wish you all a happy new year!
If you like the Card, please give my github repo a Star.

jayjojayson · December 30, 2025, 12:07am

Now your own temperature sensor should be able to be configured with version 1.5.1. Here’s how I’ve implemented it: the weather sensor still needs to be configured, then a new input field will appear where you can enter your temperature sensor. This sensor will then override the temperature reading from the weather sensor. This way, you still always have the current weather status (sunny, cloudy, etc.) nicely integrated. I think this works best and will also be easier to use for future development.

jayjojayson · January 3, 2026, 6:18pm

Good evening, I have just released v_1.6. As always, it takes a little while for you to receive the update notification. A few new features have been added.

you can now resize the sun image in arc view to your desired size.
an icon showing the current moon phase can now be displayed behind the moon phase text.
moon phase text can be hidden during the day and displayed after sunset.
a few optimizations for the card editor and the card itself.