The devices we use all day, every day—phones, tablets, computers—emit a large amount of bright, blue light. A Harvard Health Letter notes that blue light—the type of light that is beneficial during the day because it boosts attention, reaction times, and mood—can be disruptive at night. Extended exposure to this type of light suppresses the release of melatonin, delaying sleepiness and altering our circadian rhythms.
f.lux is a free application that attempts to fix this issue. The program automatically adapts your computer’s display, warming its colors as the sun sets and brightening them as the sun rises. In addition to applications like f.lux, several other websites are attempting to address the issue. The popular blog, Bobulate, created an “evening edition”. At 6 p.m. each day, a visual shift occurs, inverting the colors, making it easier to read their posts late at night. In addition to Bobulate, Gmail, iBooks, and text editors such as Sublime and Atom offer dark themes or modes.
As user interface designers at Centro, we are doing our best to be part of this solution as well. By understanding our users’ location and the time of day they access our site, we are now serving a nighttime theme when appropriate. To accurately serve up nighttime styles for all of our users, we need to accomplish three things:
- Get the user’s location
- Get the current sunrise and sunset times for the user’s location
- Trigger the nighttime styles during nighttime hours
Get the user’s location
First, we need to know where the user is. One way of achieving this is the
geolocation API and it’s
getCurrentPosition() method. The problem with
this approach is that the user is asked for permission to report their location
information. Not an ideal start to the reading experience.
Instead, we are relying on the public HTTP API provided by freegeoip.net. The service uses a database of IP addresses associated with relevant geolocation data like latitude and longitude. A simple AJAX request returns an object with all the information we need:
Get the current sunrise and sunset times for the user’s location
Next, we need to calculate the sunlight phases at the user’s location. Thanks to
Vladimir Agafonkin’s SunCalc library, this is a breeze. The library
calculates sun and moon phase information based on date, latitude and longitude.
Within our freegeoip.net AJAX callback function, we make a call to SunCalc’s
getTimes() method returns an object with a number of handy properties.
Note that we are interested in the sunrise time for the following day.
Trigger the nighttime styles during nighttime hours
With all the relevant variables defined, we use some simple logic to trigger the
nighttime styles and define a
timeOfDay variable on sessionStorage
so that subsequent page loads don’t require a separate AJAX request. Note that
we use a
.is-nighttime CSS class modifier on the body element to trigger the nighttime
By implementing these three simple steps, we now offer our readers a healthier, more pleasant nighttime experience. Come back after sunset to see our nighttime theme in action!