Day/Night CSS with JavaScript

24th of February, 2026

My friend coffeebug (midifreak.online) made a post on her neocities profile talking about how having "times of day" on her website would be cool, but lamenting never being able to implement it.

If you reading this visited my site around February 2025, you might know that I had a theme selector. I still have the files from that iteration, so I was able to adapt it to make this cool idea a reality. Some things to know about this:

This implementation requires some knowledge of element manipulation via JavaScript.
This implementation makes use of multiple CSS files. You should have knowledge of CSS variables.
~~I have not tested the code in here outside of making sure the syntax actually parses. Your mileage may vary.~~There is a test of this code at the top of the page.

The JavaScript Code

If you think you're pro enough, here is the full JavaScript.

let date = new Date();
const tz = "America/Chicago"; // CST
// Pick one Hour variable and delete the other two!
let localHour = date.getHours();
let UTCHour = date.getUTCHours();
let tzHour = new Intl.DateTimeFormat("en-US", {hour: "numeric", hour12: false, timeZone: tz}).format(date);
/* This grabs an HTML element with the "theme" id. This should be a <link rel="stylesheet"> tag in the document <head>
Refer to the HTML code sample. */
const themeLink = document.GetElementById("theme");
// Do not touch this unless you want a default theme (which you can set with the switch statement below anyway)!
let themeUrl = "";

// Replace x with whatever Hour variable you're using above.
switch (true) {
  case (x <= 05 || x >= 19):
    themeUrl = "/night.css";
    break;
  case (x == 06 || x == 18):
    themeUrl = "/twilight.css";
    break;
  case (x >= 07 && x <= 17):
    themeUrl = "/day.css";
    // The default case isn't really necessary but it is here just in case. If you want to remove it, be sure to remove this break statement after this comment!
    break;
  default:
    themeUrl = "";
}

/* If themeUrl is empty (as with initial setup and the default case), then the href will be empty, which means the link tag essentially does nothing.
Make sure you have some sort of fallback. Ideally, the time-based stylesheet should be loaded AFTER a main stylesheet so nothing is super broken if this script does return an empty url! */
themeLink.href = themeUrl;

Now if you don't know what the hell any of that meant, let me break it down for you (~~starts beatboxing~~).

Let's look at grabbing the time first:

let date = new Date();
const tz = "America/Chicago"; // CST
let localHour = date.getHours();
let UTCHour = date.getUTCHours();
let tzHour = new Intl.DateTimeFormat("en-US", {hour: "numeric", hour12: false, timeZone: tz}).format(date);

So first, we create an instance of the Date() object. We only want the hour from this, so we can use either .getHours(), .getUTCHours(), or Intl.DateTimeFormat().

.getHours() just takes the hours reported from Date(). This will be the time reported by the visitor's browser, which is usually the computer's set time.
.getUTCHours() ignores the visitor's timezone and just reports the universal time.
Intl.DateTimeFormat() is the most complex, since it is technically its own object. Let's break down what parameters we've set above:

"en-US" sets the locale. I'm not sure if other locales have any effects on the outputted hour.
{hour: "numeric", hour12: false, makes it so that we only get the hour from this object, in 24-hour format.
timeZone: tz} uses the tz constant above, which must be set to a timezone formatted like "America/Chicago".
We only need one of these, not all three, so pick whatever suits your needs.

Now we need to make sure it knows where to change the stylesheet.

The CSS Code

Work in progress!