nightlife

detect night time based on user location

Usage no npm install needed!

<script type="module">
  import nightlife from 'https://cdn.skypack.dev/nightlife';
</script>

README

nightlife

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.

Install

<!-- inside your <head> -->
<script defer src="http://unpkg.com/nightlife/dist/nightlife.js"></script>

Night mode CSS

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

API

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()}`
    )
})