Simple Night Shift Mode Fo Websites

Nov 21, 2016 hue javascript nighshift
WhatsApp
I spent an afternoon going over how I would emulate the Night Shift mode made by Apple who they were inspired from https://justgetflux.com/ or was it someone else.. There’s an app on the app store that does the same thing. This javascript plugin I made quickly is for websites. Currently it changes the colour of the body tag but I'm looking to upgrade it to layer over all components like a filter. But it's a start!

//Initial variables
var h = 33;
var s = 100;
var l = 99;
var fadeToBlue = false;
var fadeToYellow = false;
var timer_one = 10;
var timer_two = 5;
var blue = 198;
var orange = 31;

//Fade To Functions
function fadeToYellowFunction() {
if (h >= orange && fadeToYellow == true) {
h--;

if (h == orange-1) {
fadeToYellow = false;
}

setTimeout(function() {
fadeToYellowFunction(h)
}, 10);
}
}

function fadeToBlueFunction() {
if (h <= blue && fadeToBlue == true) {

if (h == blue-1) {
fadeToBlue = false;
}

setTimeout(function() {
fadeToBlueFunction(++h)
}, 10);
}
}

//Main function to call to begin
function fadeColour() {

var today = new Date();
var seconds = today.getSeconds();
var minutes = today.getMinutes();
var hours = today.getHours();

document.getElementById('clock').innerHTML = hours + ":" + minutes + ":" + seconds;
document.body.style.backgroundColor= 'hsl('+ h +',100%,99%)';

//console.log(seconds);

//timed fades
if ((seconds % timer_one) == 0 && (seconds % timer_two) == 0) {
fadeToBlue = true;
console.log('fadeToBlue');
fadeToBlueFunction();
fadeToYellow;
}

if ((seconds % timer_two) == 0 ^ (seconds % timer_one) == 0) {
fadeToYellow = true;
console.log('fadeToYellow');
fadeToYellowFunction();
}

var t = setTimeout(fadeColour, 500);
}


A few things to note here is that in this plugin, it is using HSL values instead of RGB to shift between a yellow hue and blue hue. It’s easier to maintain the brightness and level of colour using HSL values.

I also grab the current time and use it to change the fading. In the above code it is changing the colours every 5 seconds but this can modified easily, as I’ve separated the fading action functions into their own block of code.

Finally I use the setTimeout(). The function is a little weird for beginners because it starts delving into threaded processing, asynchronous and synchronous. Through some brief reading, basically Javascript runs on a single thread, but we can use setTimout() to have a block of code behave asynchronously.

Think of it as a block of code running independently of the main flow of the program, that seemingly appears to be running in parallel with each other but in actual fact they are not. Instead what happening is the cpu is constantly switching between threads to execute the code. In our code above the clock and the fade would be running “together”.

If you found the following info helpful, I'm happy to accept any donations of the following cryptocurrencies.

  • Bitcoin - 17DTiPExzP9StqveW428acEyB4mVMfKbiK
  • Ethereum - 0x87B8307FD20dc90cc05c94905Ec593134D32B6FF
  • Litecoin - LZMiz5U5sVq9doMLYE3gfLJrxCQDKuyCmU
  • Neo - AXv71WB38ajc1KUUEnxQKhynLLPc4BapVb