Timely Theme Change

Bootstrap Studio Help
1

Hi, I wanted to know if I can change themes from day to night and vice versa. For example at days I want it to have light theme and at nights the dark theme

2

You can with some help from JavaScript. Below is a modified script from https://stackoverflow.com/questions/16281832/change-css-based-on-time-of-date-or-time-of-day

I have heavily altered it because some of the stuff it was doing seemed a bit more than necessary to me.

Basically it gets the current hour. Then checks at what time of day that hour falls into. Based on that check it sets a class on the Body element. Now I have modified it where after it's initial load of the site it runs a timer to check every 30 seconds whether or not it needs to update the class on the body element. There is an inner check as well where it checks if the currently set class is the current time of day class then it won't do anything other wise it will clear the body's class and then add the appropriate time of day class.

function TimeOfDaySiteChange () {
    var d = new Date();
    var n = d.getHours();

    if (n < 5) {
        // midnight
        if ($("body").hasClass("night") != true) {
            $('body').removeClass();
            $('body').addClass("night");
        }
    } else if (n > 16 && n < 20) {
        // If time is between 5PM &ndash; 8PM sunset theme to 'body'
        if ($("body").hasClass("dusk") != true) {
            $('body').removeClass();
            $('body').addClass("dusk");
        }
    } else if (n > 19) {
        // If time is 8PM 
        if ($("body").hasClass("night") != true) {
            $('body').removeClass();
            $('body').addClass("night");
        }
    } else if (n > 8) {
        // If time is 9AM
        if ($("body").hasClass("daytime") != true) {
            $('body').removeClass();
            $('body').addClass("daytime");
        }
    } else {
        // Else use 'dawn' theme
        if ($("body").hasClass("dawn") != true) {
            $('body').removeClass();
            $('body').addClass("dawn");
        }
    }
    setTimeout(function(){ TimeOfDaySiteChange() }, 30000);
}

$(function(){
    TimeOfDaySiteChange();
});

All you'll need to do is style your site based on the time of day class. For testing purposes you can comment out the initial loading function.

Saj

3

Thanks a million! Helps a lot!

4

Your welcome, glad I could help :)

Saj

5

I wonder if you could incorporate a GPS location input in order to change it to night during a solar eclipse on a specified time of day and date. Of course you would have to be a 100% nerd to be sitting at your computer to see it change instead watching the eclipse, but math can be fun sometimes !