Published: Sat 24 Oct 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();

 

Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.