Varun Sridharan
VS Writings

VS Writings

Time-Based Website Theme Using Javascript

Time-Based Website Theme Using Javascript

Varun Sridharan's photo
Varun Sridharan

Published on Nov 13, 2020

3 min read

Subscribe to my newsletter and never miss my upcoming articles

In this post, we are going to learn how to load stylesheets on a website based on the current time of the day. This can be useful if you are planning to add dark mode support which can be auto-enabled.


First, add a basic stylesheet which renders a general version of the page.

<link rel='stylesheet' href='style.css' type='text/css'>

We need to know the current hour of the day using the date & time from the client's machine. it can be done using javascript's Date API

// Returns The Current Hour In 24-Hrs Format
var current_hour = (new Date()).getHours()

Next, we need to define our time condition. I wrote a basic logic splitting a day into 4 parts.

  • Morning : current_hour >= 5 && current_hour <= 12
  • Afternoon : current_hour >= 12 && current_hour <= 14
  • Evening : current_hour >= 14 && current_hour <= 18
  • Night : current_hour >= 18 && current_hour <= 5
if( current_hour >= 5 && current_hour <= 12 ) {
    // Morning 5AM - 12PM
} else if( current_hour >= 12 && current_hour <= 14 ) {
    // Afternoon 12PM - 3PM
} else if( current_hour >= 14 && current_hour <= 18 ) {
    // Evening 3PM - 6PM
} else if( current_hour >= 18 && current_hour <= 5 ) {
    // Night 6PM - 5AM
}

Once the time is decided, we need to load the CSS file for that time of the day. This can be achieved using document.write API

var current_hour = (new Date()).getHours()

if( current_hour >= 5 && current_hour <= 12 ) {
    // Morning 5AM - 12PM
    document.write( "<link rel='stylesheet' href='morning.css' type='text/css'>" );
} else if( current_hour >= 12 && current_hour <= 14 ) {
    // Afternoon 12PM - 3PM
    document.write( "<link rel='stylesheet' href='afternoon.css' type='text/css'>" );
} else if( current_hour >= 14 && current_hour <= 18 ) {
    // Evening 3PM - 6PM
    document.write( "<link rel='stylesheet' href='evening.css' type='text/css'>" );
} else if( current_hour >= 18 && current_hour <= 5 ) {
    // Night 6PM - 5AM
    document.write( "<link rel='stylesheet' href='night.css' type='text/css'>" );
}

Do keep in mind that we originally loaded the general version of the CSS to begin with. Therefore, the time-based CSS must only contain those elements which you would like to override based on the time.

Here is a minified version of the Code

var hour     = ( new Date() ).getHours();
var file = ( hour >= 5 && hour <= 12 ) ? 'morning.css' : '';
file     = ( hour >= 12 && hour <= 14 ) ? 'afternoon.css' : file;
file     = ( hour >= 14 && hour <= 18 ) ? 'evening.css' : file;
file     = ( hour >= 18 && hour <= 5 ) ? 'night.css' : file;
document.write( "<link rel='stylesheet' href='" + file + "' type='text/css'>" );

Questions or feedback? Please comment below.

See all my projects at Github.

Follow me on Twitter for updates

 
Share this