DEV Community

Set the theme of a website based on the time of the day (no external library)

Sam on December 15, 2022

In this blog post, I will show you how to use JavaScript, and CSS to set the theme of your website based on the time of day. This can be a useful f...

Read full post

Bram Hammer • Dec 16 '22

Honestly don't think this is a good example.
Better to set a class to your body (or use a dataset attribute on the html or body tag) and set variables in CSS and change them when data-theme="dark" or data-theme="light" for example.

Make the default light, and when hours are before 6 or after 18... --> Set to dark.

:root, html[data-theme='light'] {
    --background-color: white;
    --text-color: black;
}

html[data-theme='dark'] {
    --background-color: black;
    --text-color: white;
}

body {
    background: var(--background-color);
    color: var(--text-color);
}

<!DOCTYPE html>
<html data-theme="light">
<head>
  <title>Time-Based Theme Example</title>
  <script>
    // Get the date
    const date = new Date();
    const hour = date.getHours();

    // Change data-theme to dark based on the time of day
    if (hour < 6 || hour >= 18) 
      document.documentElement.dataset.theme = 'dark';
  </script>
</head>
<body>
  <h1>Time-Based Theme Example</h1>
  <p>This page demonstrates how to use JavaScript, HTML, and CSS to set the theme of a website based on the time of day.</p>
</body>
</html>

Rafał Goławski • Dec 17 '22

Exactly this ☝ Using prefers-color-scheme this could be solved in a few lines of CSS.

@media (prefers-color-scheme: light) {
  /* light scheme styles */
}

@media (prefers-color-scheme: dark) {
  /* dark scheme styles */
}

Sam • Dec 18 '22

Thanks for the addition. This example is definitely a good approach. Please take a look at my reply.

Sam • Dec 18 '22

This is just a different approach which potentially saves you a tiny bit of bandwidth by not importing the styles you don't use. More importantly it's a good example, IMO, to show how to conditionally include the styles you need.

Amir-cahyadi • Dec 15 '22

❤️👍👍

Sukhman • Dec 16 '22

Interesting

Alex • Dec 17 '22

I really don't want to sound toxic and I hope that you won't take it to heart. Anyway, when I clicked on the link from dev.to email, my thoughts were like "wow it should be very interesting". How did they solve daylight saving time? Timezones? Different latitudes that affect day length? That shoulda be hell of an interesing, is there some new API? Well...

Ian M • Dec 20 '22

I happened to run into this the other day, here's some javascript to determine sunrise/sunset based on latitude and longitude: github.com/udivankin/sunrise-sunset

Sam • Dec 18 '22

Sorry to disappoint, but I didn't have any bad intentions. I think you missed the beginners tag.
I use the tags accordingly so you know what you can expect from the article.

Nazar • Dec 18 '22

same there 🤣 😅 🥲

Sam • Dec 18 '22

Just repeating the above reply:
Sorry to disappoint, but I didn't have any bad intentions. I think you missed the beginners tag.
I use the tags accordingly so you know what you can expect from the article.