Applying a Different Stylesheet Based on the Time of Day using CSS

If you want to apply a different stylesheet as the day progresses, pull in the time on the user’s clock and deliver the appropriate stylesheet:

<script type="text/javascript">

 function setTimedStylesheet() {

 var theTime = new Date().getHours();

 if (8 <= theTime&amp;&amp;theTime < 20) {

	document.write("<link rel='stylesheet' href='daytime.css'

type='text/css'>");

 }

 if (20 <= theTime&amp;&amp;theTime < 8) {

 document.write("<link rel='stylesheet' href='nighttime.css'

type='text/css'>");

 }

 }

setTimedStylesheet();

</script>

Make sure you include the noscript element that includes a link to the default stylesheet in case the browser does not have Javascript:

<script type="text/javascript">

 function setTimedStylesheet() {

 var theTime = new Date().getHours();

 if (8 <= theTime&amp;&amp;theTime < 20) {

	document.write("<link rel='stylesheet' href='daytime.css'

type='text/css'>");

 }

 if (20 <= theTime&amp;&amp;theTime < 8) {

 document.write("<link rel='stylesheet' href='nighttime.css'

type='text/css'>");

 }

 }

setTimedStylesheet();

</script>

<span class="strong"><strong><noscript></strong></span>

 <span class="strong"><strong><link href="default.css" rel="stylesheet" type="text/css"></strong></span>

<span class="strong"><strong></noscript></strong></span>

Creating a customized look and feel based on the time of day isn’t a far-fetched notion. Radio and television stations in the United States divide their broadcasts based on the time of day—for example, Daytime Emmy Awards, drive-time radio shows, prime time television shows, and so on.

The main problem with using this method is that you are assuming the clocks on people’s computers are actually accurate.

Another solution is to get the time of day from your server through a middleware programming language such as PHP and pass it on as a variable to the Javascript.