Many sites and apps let us switch between a light theme and a dark theme. Some of us prefer dark mode late at night. Some of us prefer it all the time. In this exercise, we are going to build a page with a dark mode toggle. Try flipping the switch below (or open it in a new window):

Your version needs to do the following:

1. Have a light theme and a dark theme. At the very least, the background and text colors should change between the two
2. Have a toggle that switches between the light and dark themes
3. Remember the theme that was picked. If we reload the page or come back to it later, the page should use the theme we picked last

Here is a tip: CSS variables (also known as custom properties) are a great fit for this. If all of our colors are defined using variables, switching themes becomes a matter of changing what those variables are set to.

For extra credit, use the theme that matches the operating system's setting the very first time someone visits, before they have picked a theme of their own. The prefers-color-scheme media query will help here. You can also make the colors animate smoothly from one theme to the other.

Onwards!

Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle</title>
  <style>
    
  </style>
</head>
<body>
  <header>
    <p>My Website</p>
    <button id="themeToggle">Toggle theme</button>
  </header>

  <main>
    <h1>A Tale of Two Themes</h1>
    <p>It was the best of themes, it was the darkest of themes.</p>
  </main>

  <script>
    
  </script>
</body>
</html>

This gives us a simple page with a header, a button for toggling our theme, and a bit of content. The styling for both themes and the JavaScript are what you will add entirely on your own!

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection:

To claim it, head over to the forums and respond in the Dark Mode Toggle topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums. Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!

Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇