How to change elements' appearance with time of the day?

user_16942961 0
Viewed 99

I want to change the background image of an element and also change content of a heading according to time of the day. If the time is between 6 and 12 it must keep the bg and text according to the morning.

darkmode css html
1 Answers

You can't do only with css & html. You should use js.

If you set your night, day time css you can use this trick :

var date = new Date;
var hour = date.getHours();
if(hour > 18 || hour < 6){
    document.body.className += ' nighttime-css';
    // JQUERY => $('body').addClass('nighttime-css')
}else{
    document.body.className += ' daytime-css';
    // JQUERY => $('body').addClass('daytime-css')
}

css :

.nighttime-css{background: url('nighttime-bg.jpeg');

.daytime-css{background: url('daytime-bg.jpeg');

user_101692610
Related