Theme that change with time of day

Hello guys,

I have just made 2 temporary themes called 'day' and 'night'. I'm wondering if there is a code that can help me automatically change the forum themes according to time of day? Thank you very much in advance. 

Ps. I also would like to know if there is also a way to add a audio file/youtube link along side each theme. So the sound of day theme is differ from the night theme. Something like that?

My Forum: http://thelostedencode.forumth.com/
Forum Version: Invision

You just wanna change css files at some time?

Or you need to change html/js content too?

Hello Ikerepc,

Yes exactly. I want to change the css files but keep the html/js content the same.  Thank you for your reply 

Can't you manually do it? Just have both on a document or Notepad.

I considered that but it's not really an ideal solution. Thanks though

How much lines of CSS you have?

There is way to do it via JS:

Code:

      var currentTime = new Date().getHours();
      if (22 <= currentTime&&currentTime < 5) {
      document.write("night css here");
      }
      if (5 <= currentTime&&currentTime < 22) {
      document.write("day css here");
      }

But if you have a lot of lines, it would take long to load, and if omeone turn off JS it would be problem

Maybe best for it (if you are changing just colors / images or so) will be if you using same css for every theme.
And just adding changes for another one in js code.

Like this:
CSS:

Code:


.module .box-content {
    background-color: brown;
    border-bottom: none;
}


Here whole code for day

JS:

Code:

      var currentTime = new Date().getHours();
      if (7 <= currentTime&&currentTime < 22) {
      document.write(".module .box-content { background-color: cyan; }");
      }


Night changes. Changed background of module from brown to cyan

That's just example code...
I hope i helped. I'm not at computer now, so if you don't understand / need more help, just write, I will try to figure something out

Thank you Ikerepc! I think the second option is probably better since my CSS is quite long. However, I'm not really sure how to modify the code. With some reasons, the code itself displays on top of the forum   There are two things I really want to change is the background and forum main logo. I tried to modify it myself but didn't quite work out.

Code:

var currentTime = new Date().getHours();
      if (7 <= currentTime&&currentTime < 22) {
      document.write(".body {background-image: url(http://i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/Backgroun_DN2_1.png);  background-size: 100%;}");
      }

Day Images
background: https://2img.net/h/i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/Backgroun_DN_1.png
forum main logo: https://2img.net/h/i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/LogoImage_Day.png

Night Images
background: https://2img.net/h/i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/Backgroun_DN2_1.png
forum main logo: https://2img.net/h/i1122.photobucket.com/albums/l529/yayayes/Bucket%2003/LogoImage_Night.png

This should work, to change logo immidietly... But it doesn't...

Code:

document.getElementById("logo").innerHTML = '<a href="/" id="logo"><img src="url here" alt="Forum"></a>';

Only, you need to put it inside { and } in if statement...

Try it out. It is working at blank page but not at my forum... I'm not sure why. I will see it later if you have time...

Sry