Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

The code is doing what it suppose to do; but I keep getting this error message. I hate asking for help.
// running tests
26. When a user clicks on the #theme-switcher-button and selects a theme, the corresponding theme- class should be added to the body element.
27. When a user clicks the #theme-switcher-button and selects a theme, a message related to the selected theme from the themes array should be displayed in the aria-live=“polite” element.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Theme Switcher</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <button
    id="theme-switcher-button"
    aria-haspopup="true"
    aria-expanded="false"
    aria-controls="theme-dropdown"
  >
    Switch Theme
  </button>

  <ul
    id="theme-dropdown"
    role="menu"
    aria-labelledby="theme-switcher-button"
    hidden
  >
    <li role="menu-item" id="theme-ocean">Ocean</li>
    <li role="menu-item" id="theme-desert">Desert</li>
    <li role="menu-item" id="theme-midnight">Midnight</li>
  </ul>

  <div id="theme-message" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  font-family: sans-serif;
  transition: background-color 0.3s ease;
  padding: 2rem;
}

#theme-dropdown {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  border: 1px solid #ccc;
  width: 200px;
  background: #fff;
}

#theme-dropdown li {
  padding: 0.5rem;
  cursor: pointer;
}

#theme-dropdown li:hover {
  background-color: #eee;
}

.theme-ocean {
  background-color: #0077be;
  color: #ffffff;
}

.theme-desert {
  background-color: #edc9af;
  color: #5c3a21;
}

.theme-midnight {
  background-color: #2c3e50;
  color: #ecf0f1;
}

#theme-message {
  margin-top: 1rem;
  font-weight: bold;
}

/* file: script.js */
const themeButton = document.getElementById("theme-switcher-button");
const themeDropdown = document.getElementById("theme-dropdown");
const themeMessage = document.getElementById("theme-message");

const themes = [
  { name: "ocean", message: "Dive into the calm of the Ocean 🌊" },
  { name: "desert", message: "Feel the warmth of the Desert ☀️" },
  { name: "midnight", message: "Embrace the mystery of Midnight 🌌" }
];

themeButton.addEventListener("click", () => {
  const isExpanded = themeButton.getAttribute("aria-expanded") === "true";
  themeButton.setAttribute("aria-expanded", String(!isExpanded));
  themeDropdown.hidden = isExpanded;
});

themeDropdown.addEventListener("click", (e) => {
  if (e.target && e.target.matches("li[role='menu-item']")) {
    const selectedId = e.target.id; // e.g., "theme-ocean"
    const themeName = selectedId.replace("theme-", ""); // e.g., "ocean"

    // Apply theme class to <body>
    document.body.className = `theme-${themeName}`;

    // Display theme message
    const themeObj = themes.find(t => t.name === themeName);
    if (themeObj && themeObj.message) {
      themeMessage.textContent = themeObj.message;
    }

    // Close dropdown and update aria-expanded
    themeDropdown.hidden = true;
    themeButton.setAttribute("aria-expanded", "false");
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher
https://www.freecodecamp.org/learn/full-stack-developer/lab-theme-switcher/lab-theme-switcher

2

The issue is with how you update the class on the body.
Right now you are replacing all classes with a new value.
The correct way is to keep the body classes intact and only set the proper theme-* class.

1 Like
3

I fixed the theme switcher by adding e.stopPropagation() to the item click handler, preventing the button’s event from interfering. Then I remove only theme-light/theme-dark, add the selected theme class, update the aria-live message, and properly close the dropdown with aria attributes.

1 Like
4

Thank you very much!

1 Like
5

how did you solved the problem?

6

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.