Published: October 24, 2020
Website Colours Decided by Time
This is a small proof-of-concept in which the colours of a website change based on the time of day.
How does it work?
It's simple really. In JavaScript, we see how much time has passed since midnight, and express that as a percentage. We then take that percentage to update some CSS custom properties for a light and a dark colour.
Why would you make this crap?
I dunno yet. But I am imagining some interesting design possibilities with websites changing colours, layout, etc based on arbitrary variables.
You can see the PoC on my fun website. And you can view the source code on GitHub.
In CSS, we set a variable for --colour-primary and --colour-secondary using hsl. We then update the L value, with the percentage of the day that has passed, via JS.
function percentageOfTime() {
const numberOfSecondaInADay = 60 * 60 * 24;
const currentDate = new Date();
const hours = currentDate.getHours();
const minutes = currentDate.getMinutes();
const seconds = currentDate.getSeconds();
const secondsSinceMidnight = (hours * 60 * 60) + (minutes * 60) + seconds;
const percentTimePassed = Math.round(secondsSinceMidnight / numberOfSecondaInADay * 100);
const rootStyle = document.documentElement.style;
rootStyle.setProperty('--percent-passed', percentTimePassed + '%')
percentTimePassed < 50 ? rootStyle.setProperty('--colour-secondary', '#fff') : rootStyle.setProperty('--colour-secondary', '#000');
}
percentageOfTime();