Grow your CSS skills. Land your dream job.

Last updated on:

Different Stylesheet Pending the Time of Day

<script>
<!--
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'>");
      }
}

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.

Comments

  1. Euan

    depending not pending.

    but very useful

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

    • josh
      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. could you also do this with Resolution. like depending on the resolution use this stylesheet, instead of This. ?

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

  5. 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. Hi, great little script. However, I want to add a class to the body as well using

    
     if (0 <= currentTime&&currentTime  < 5) {
    		  $('body').addClass('night');
           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. Permalink to comment#

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

    Thanks

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

    Paul

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

  11. 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. wolf
    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. wolf
    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. wolf
    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. wolf
    Permalink to comment#

    oops … typo

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

    would be

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

    as well of course … ;)

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

  17. Wolf
    Permalink to comment#

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

  18. Permalink to comment#

    Love you man :) Thanks for this!

  19. chand
    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. Eric
    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. Permalink to comment#

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

  22. Casa Malina
    Permalink to comment#

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

  23. 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. 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. 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. RyƓ
    Permalink to comment#

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

  27. Geo

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".