Step 5: A dark mode switch

Because every colour is a variable, dark mode is just a second set of values. Add a dark class to the body that redefines --bg, --fg, --card and --accent, then a small script toggles the class when a button is clicked. The button uses aria-pressed so assistive technology knows its state.

Examplehtml

<style>
:root { --bg: #ffffff; --fg: #1f2330; --accent: #0b6b4a; --card: #f1f3f5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; background: var(--bg); color: var(--fg); }
header { background: var(--accent); color: #fff; padding: 28px 20px; text-align: center; }
header h1 { margin: 0; font-size: 2rem; }
nav { margin-top: 12px; }
nav a { color: #fff; margin: 0 10px; font-weight: 600; }
main { max-width: 860px; margin: 0 auto; padding: 20px; }
h2 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 2px; }
footer { text-align: center; padding: 20px; color: #5b6270; }
#projects .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
article { background: var(--card); padding: 16px; border-radius: 10px; border-top: 4px solid var(--accent); }
article h3 { margin-top: 0; }
@media (max-width: 640px) {
  #projects .cards { grid-template-columns: 1fr; }
  nav { display: flex; flex-direction: column; gap: 6px; }
  nav a { margin: 0; }
  header h1 { font-size: 1.6rem; }
}
body.dark { --bg: #14161d; --fg: #e8eaf0; --card: #20232d; --accent: #3ddc97; }
body.dark header { color: #0b0d12; }
body.dark nav a { color: #0b0d12; }
#theme { position: fixed; top: 10px; right: 10px; padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer; background: #ffffffcc; color: #111; }
</style>
<button id="theme" aria-pressed="false">Dark mode</button>
<header>
  <h1>Ada Lovelace</h1>
  <p>Front-end developer in London</p>
  <nav aria-label="Main">
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About me</h2>
    <p>I build fast, friendly websites and I love teaching others how the web works.</p>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <div class="cards">
    <article><h3>Weather app</h3><p>A small app that shows the forecast.</p></article>
    <article><h3>Recipe finder</h3><p>Search recipes by ingredient.</p></article>
    <article><h3>Quiz game</h3><p>Test your web knowledge.</p></article>
    </div>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p>Say hello: ada@example.com</p>
  </section>
</main>
<footer><small>&copy; 2026 Ada Lovelace</small></footer>
<script>
var themeBtn = document.getElementById("theme");
function applyTheme(dark) {
  document.body.classList.toggle("dark", dark);
  themeBtn.setAttribute("aria-pressed", String(dark));
  themeBtn.textContent = dark ? "Light mode" : "Dark mode";
}
themeBtn.addEventListener("click", function () {
  applyTheme(!document.body.classList.contains("dark"));
});
</script>

Open in editor »

In a finished site you would also remember the choice in localStorage and start from the visitor's system preference with window.matchMedia('(prefers-color-scheme: dark)').

Your turn: write the code

Write nextTheme(current) that returns "dark" when the current theme is "light" and "light" otherwise. Print nextTheme("light") and nextTheme("dark").

Quick check

Why are the colours stored in CSS variables?

So one class can switch the whole themeBecause CSS cannot use plain coloursTo make the page load faster

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.