nightlife detects users location and calculates sunrise and sunset time at their location, to apply a different style at night time.
If user location can not be retrieved, it is assumed that the night goes from 6pm to 6am, local time.
<!-- inside your <head> -->
<script defer src="http://unpkg.com/nightlife/dist/nightlife.js"></script>If you want a default basic night theme, you can use this one: it inverts the lightness of all colors except for images and videos.
<link rel="stylesheet" href="http://unpkg.com/nightlife/dist/nightlife.css" />If you want your own styles at night time, use this media query:
@media (prefers-color-scheme: dark) {
/* these styles will apply at night time */
/* or if user explicitely asks for a dark color scheme */
body {
background-color: black;
}
}This media query is currently not supported on most browsers, so you will also have to use this : css-prefers-color-scheme
nightlife.on("init", function() {
console.log(
`nightlife is now initialized.`,
`It's ${nightlife.isNight ? "night" : "day"}.`,
`Today, sun rises at ${nightlife.sunrise.toLocaleTimeString()}
and sets at ${nightlife.sunset.toLocaleTimeString()}`
)
})
nightlife.on("sunrise", () => console.log(`A new day has risen.`))
nightlife.on("sunset", () => console.log(`Night has fallen.`))
nightlife.toggleNightMode() // manually toggle on and off night mode
nightlife.toggleNightMode(true) // force on night mode
nightlife.toggleNightMode(false) // force off night mode
nightlife.calcSunriseAndSunset().then(({ sunrise, sunset }) => {
console.log(
`Today, sun rises at ${nightlife.sunrise.toLocaleTimeString()}
and sets at ${nightlife.sunset.toLocaleTimeString()}`
)
})