Different Stylesheet Pending the Time of Day

function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");


<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.


  1. User Avatar

    depending not pending.

    but very useful

  2. User Avatar
    Nicolas Bouliane

    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!

    • User Avatar
      Permalink to comment#

      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)

  3. User Avatar
    Attila Hajzer

    could you also do this with Resolution. like depending on the resolution use this stylesheet, instead of This. ?

  4. User Avatar
    Billy Brown
    Permalink to comment#

    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.

    • User Avatar
      Permalink to comment#

      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.

  5. User Avatar
    Permalink to comment#

    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!

  6. User Avatar
    Poole Web Design
    Permalink to comment#

    Hi, great little script. However, I want to add a class to the body as well using

     if (0 <= currentTime&&currentTime  < 5) {
           document.write("<link rel='stylesheet' href='night.css' type='text/css' >");

    It’s adding the stylesheet, just not the class on body – any ideas?

  7. User Avatar
    Easy Webs
    Permalink to comment#

    **BUMP**! Any ideas on the above? Would be amazingly helpful to a few people I’d imagine.


  8. User Avatar
    Permalink to comment#

    @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.

    $(document).ready(function() { 
  9. User Avatar
    Easy Webs
    Permalink to comment#

    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.


  10. User Avatar
    Permalink to comment#

    This is very great. I will definitely use this for my next project

  11. User Avatar
    Matt Havoc
    Permalink to comment#

    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.

  12. User Avatar
    Permalink to comment#

    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 …

  13. User Avatar
    Permalink to comment#

    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!

  14. User Avatar
    Permalink to comment#

    @ Matt Havoc …
    How about calculating the minute of the day? Supposedly a day has 1440 minutes.

    Can someone check this code – would this work?

          var currentDate = new Date();
          var currentMinute = (currentDate.getHours()  * 60) + currentDate.getMinutes();
          if (0 <= currentMinute&&currentMinute < 30) {
          document.write("<link rel='stylesheet' href='0_30.css' type='text/css'>");
          if (30 <= currentMinute&&currentMinute < 60) {
          document.write("<link rel='stylesheet' href='30_60.css' type='text/css'>");
          // you get the idea ... so we are wrapping it up for the rest of the time
          if (60 <= currentTime&&currentTime <= 1400) {
           document.write("<link rel='stylesheet' href='60_1440.css' type='text/css'>");
  15. User Avatar
    Permalink to comment#

    oops … typo

    if (60 <= currentTime&&currentTime <= 1400) {

    would be

    if (60 <= currentMinute&&currentMinute <= 1400) {

    as well of course … ;)

  16. User Avatar
    Matt Havoc
    Permalink to comment#

    @wolf: Thank you so much, that did exactly what I needed it to do it. You rock!

  17. User Avatar
    Permalink to comment#

    @Matt Havoc – You are welcome. Glad it worked …

  18. User Avatar
    Permalink to comment#

    Love you man :) Thanks for this!

  19. User Avatar
    Permalink to comment#

    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.

  20. User Avatar
    Permalink to comment#

    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.

  21. User Avatar
    Permalink to comment#

    It seems to me that the code box is empty? Anyone else noticing this?

  22. User Avatar
    Casa Malina
    Permalink to comment#

    Wow! Best script on the net for time-sensitive css!!

  23. User Avatar
    Permalink to comment#

    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!

  24. User Avatar
    Permalink to comment#

    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!

  25. User Avatar
    Permalink to comment#

    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?

  26. User Avatar
    Permalink to comment#

    Thanks I was looking for something like this, very usefull code.

  27. User Avatar

    This is great. But what happened if the visitor uses a 12 hour format on his PC ?

  28. User Avatar
    Permalink to comment#

    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. :(


    Loads ABC.css

    Loads XYZ.css

  29. User Avatar
    Permalink to comment#

    I need help, want to have the stylesheets change on a daily basis, how can I do that? will appreciate the help thanks.

  30. User Avatar
    Permalink to comment#

    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)


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.