DayNight
Is it light or dark where your user is? Find out without asking them, in 6.9 KB.
You, right now
β¦and everyone else
Every timezone the library knows, lit by the brightness it reports for it.
Spin the globe to any side, or click the thumbnail for the flat map β the same zones
either way. Drag the slider and the line between day and night moves, drawn by
daynight() alone, one call per dot, recomputed for every frame.
How it works
-
Ask the browser for its timezone.
Intl.DateTimeFormat().resolvedOptions().timeZonereturns something likeEurope/Madrid. No prompt, no permission, no network. - Look up the centre of that zone. A table of 418 zones, computed from real timezone boundaries and quantised to tenths of a degree to stay small.
- Work out the sun from there. Sunrise and sunset for those coordinates and that date, then whether the given moment falls between them.
So the answer is an estimate for the middle of a timezone, not for a person. That is the trade: no geolocation prompt, no IP lookup, no third-party request β in exchange for being approximate at the edges of a zone.
The call being made right now
This tracks the slider, and follows whichever dot you point at.
API
npm install daynight
theme |
'day' | 'night' |
Ready to put on an element as a class. |
|---|---|---|
light / dark |
boolean |
Whether the sun is above or below the horizon. |
brightness |
number |
0 to 1, exactly 0.5 at sunrise and at sunset. |
sunrise / sunset |
Date |
Estimated, for the centre of the zone. |
polar |
'day' | 'night' | null |
Midnight sun or polar night, when there is no sunrise or sunset to report. |
timezone |
string |
The zone used β the current name, if the one you passed has been renamed. |
coordinates |
[number, number] |
Longitude and latitude of the zone's centre. |
Both options are optional: timezone defaults to the browser's own,
date to now. Pass either to ask about somewhere else, or some other time β
which is all this page is doing.