Innovation rarely happens in a vacuum. It usually starts with an individual brave enough to contribute an idea and a team inspired enough to make it great. This blog provides a forum for all Centrons to contribute ideas, make suggestions, ask questions and inspire others. There are no boundaries. To participate, all you need is the desire to build great products.

From Dusk till Dawn: Dimming the Lights for a Better Reading Experience

The screens in our lives affect us more than we realize. Unlike our natural surroundings, screens are just as bright during the nighttime as they are in the daytime. A growing body of research suggests that extended exposure to screens around bedtime can degrade sleep quality. Fortunately, there is an increasing awareness of this glaring problem.

Nighttime ThemeView image on Dribbble

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:

  1. Get the user’s location
  2. Get the current sunrise and sunset times for the user’s location
  3. 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:

{
  city: "Chicago"
  country_code: "US"
  country_name: "United States"
  ip: "208.59.143.245"
  latitude: 41.929
  longitude: -87.632
  metro_code: 602
  region_code: "IL"
  region_name: "Illinois"
  time_zone: "America/Chicago"
  zip_code: "60611"
}

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:

var userLocationData =
  (SunCalc.getTimes(
    new Date(),
    location.latitude,
    location.longitude)
  );
var sunrise =
  new Date(userLocationData.sunrise.valueOf()+ 24*60*60*1000);
  // Adds 24 hours to sunrise time
var sunset = userLocationData.sunset;
var date = new Date();

The 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 styles:

if (date > sunset && date < sunrise) {
  sessionStorage.setItem('timeOfDay','nighttime');
  $('body').addClass('is-nighttime');
} else {
  sessionStorage.setItem('timeOfDay','daytime');
}

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!