<script> <!-- function getStylesheet() { var currentTime = new Date().getHours(); if (0 <= currentTime&¤tTime < 5) { document.write("<link rel='stylesheet' href='night.css' type='text/css'>"); } if (5 <= currentTime&¤tTime < 11) { document.write("<link rel='stylesheet' href='morning.css' type='text/css'>"); } if (11 <= currentTime&¤tTime < 16) { document.write("<link rel='stylesheet' href='day.css' type='text/css'>"); } if (16 <= currentTime&¤tTime < 22) { document.write("<link rel='stylesheet' href='evening.css' type='text/css'>"); } if (22 <= currentTime&¤tTime <= 24) { document.write("<link rel='stylesheet' href='night.css' type='text/css'>"); } } getStylesheet(); --> </script> <noscript><link href="main.css" rel="stylesheet"></noscript>Name your css files accordingly: night.css, day.css, etc… One cool bonus is that since JavaScript gets the time from the local machine instead of from the server, users will be served the time-based stylesheet based on their time, not the server’s, which may be in a completely different timezone.
If JavaScript is disabled in the browser, it will default to the main.css stylesheet.
depending not pending.
but very useful
Correct me if I’m wrong, but wouldn’t using PHP be much more appropriate, since the browser would not have to load the code from the server? Besides, it would hide the code from the user, preserving the magic!
Using php is only useful if you want to use the server’s time. PHP cannot get the user’s time because the browser doesn’t send information that way. If you want to base your instances off the user’s time, you have to use a client side script rather than a server side.
(Makes sense if you think about it, the server side lang date object would return the server’s date/time, while the client side lang date object would return the client’s date/time)
Depends on how you do it. If you’re loading the stylesheet via a PHP script that generates it, you could send the time of day using
new Date().getTime(), work out the hours from that (since it’ll be local time from the client) and use that to decide what stylesheet to return:A better way, and one that is less performance intensive on the server side, is to send all stylesheets in one file (since the client will cache it for you) and use a CSS class on the body tag to determine which to use – then use JS to choose the required class.
could you also do this with Resolution. like depending on the resolution use this stylesheet, instead of This. ?
Are you talking about CSS media queries?
If somebody is on the website during the change, will the whole css, as well as the new pictures (in the new css) have to load? Because that might not look too nice.
Yes, it will have to load again but this isn’t done in real time, so the theme will be changed after any kind of refresh to the page. The user won’t see the CSS change happening, he will see the new style when the page loads/reloads. Regards.
Very useful indeed. I generally have an option for the user to choose their desired css when logged in but this could be very nice to have included. Thanks!
Hi, great little script. However, I want to add a class to the body as well using
It’s adding the stylesheet, just not the class on body – any ideas?
**BUMP**! Any ideas on the above? Would be amazingly helpful to a few people I’d imagine.
Thanks
@Easy Webs, my guess is your script is executing before the body tag has loaded, so jQuery can’t find it. You need to wrap that code in a document ready, or run it at the bottom of the page.
Hi Travis,
Yes, that worked perfectly – it was the fact it just couldn’t find the body tag. I must have picked up some bad advice elsewhere that to get this to execute immediately, I could dispense with the document .ready…but it it needs this to find the element on the page!
Thanks a million, now I can swap the stylesheet and do some class specific stuff depending on the time of day…sweeeet.
Paul
This is very great. I will definitely use this for my next project
This is great and very helpful, but I have a question: How would I make it so the time changes on the half hour? I want the time to change at 5:30pm, but with this all I can do is 5pm or 6pm.
Maybe using getMinutes() on the JS?
In addition it would be great if each stylesheet could be triggered manually as well and store the choice in a cookie which would expire after a session. Would it make sense to put each document.write into it’s own function that then can then be triggered with a button on the website and of course within the if-clause. How would that look? Somebody an idea? I am only a designer and not a programmer enough to get this right …
found this manual switcher ( http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/ ) … Can the 2 approaches be combined resulting in a very useful script that chooses the stylesheet automatically based on the time of the day – but allows to overwrite the automatic choice manually by choosing a stylesheet (i.e via a dropdown menu) on the website and storing that choice in a cookie for the duration of the browser session?! That would be awesome!
@ Matt Havoc …
How about calculating the minute of the day? Supposedly a day has 1440 minutes.
Can someone check this code – would this work?
oops … typo
would be
as well of course … ;)
@wolf: Thank you so much, that did exactly what I needed it to do it. You rock!
@Matt Havoc – You are welcome. Glad it worked …
Love you man :) Thanks for this!
I want to do that if you are logged in then .css should not be as of earlier. Because i want to hide some admin options from visitor and to show only to admin as I have coded those options at the same time. So if you people have any idea to do this with php or JS or with css only. Then please solve it.
Does anyone know of a way of doing this based on the date instead of time.
For example during december 20-25th you could display “christmas.css” then switch to “newyears.css” for the following week etc… this would be a great way of adding seasonal elements without needing to be on top of things all the time.
It seems to me that the code box is empty? Anyone else noticing this?
Wow! Best script on the net for time-sensitive css!!
Just curious, how would one write the code if we do want the time displayed to be time-zone sensitive. For example, if a stores hours spanned from 9-5 (PST) then on the website it could indicate if the store was open/closed.
Anyone’s genius help on this is very appreciated!
Viva CSS- Tricks!
Hi, I was wondering on how I can use this script for use in my wordpress theme? I currently have a very bright and vibrant theme I made enabled and I would like my readers to have a dark one as well at night time for late night reading. Thanks for the help!
Hi, I have exactly the same requirement on one of my sites. Does anyone know how to implement the code in wordpress?
I would love to know that too.
I finally found this plugin and it works perfectly, you can even choose hours, days, months, etc (but it doesn’t seems to support child theme): https://wordpress.org/plugins/wp-change-template/
Hi, great snippet here. But I got a question, what if I use the snippet above for loading CSS on weekdays but I wanted to load a different CSS when in weekends (Saturday and Sunday), how do you do that?
already covered right here
Thanks I was looking for something like this, very usefull code.
This is great. But what happened if the visitor uses a 12 hour format on his PC ?
Would it be possible to load different css files based on the filename in the URL? If so, how? I’ve been looking for a solution for weeks with no luck. Sadly i’m a js noob. :(
Ex:
http://www.xxx.com/ABC.asp?blah-blah
Loads ABC.css
http://www.xxx.com/XYZ.asp?blah-blah
Loads XYZ.css
I need help, want to have the stylesheets change on a daily basis, how can I do that? will appreciate the help thanks.
How to Switch between Night and Day Specific Time Between 2 Images( Sunrise;Sunset) ?
It Switches but from 0:00-12:00
How to make it from 7:00AM to 19:00PM (First Image) and then from
19:00PM to 7:00AM (Second Image) again?
var current= new Date()
var day_night=current.getHours()
if (day_night<=12)
document.write("”)
else
document.write(“”)
Best solution ever!!! thank you bro
In this day and age, I think a better solution would be having all styles in the one file, and then using a class on
bodyto choose the style set for the time of day. It would also mean no trickery would be required to simply have a default stylesheet if javascript is disabled.styles.css:
page.html: