# Build a Theme Switcher - Build a Theme Switcher

**URL:** <https://forum.freecodecamp.org/t/build-a-theme-switcher-build-a-theme-switcher/787963>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [May 6, 2026, 12:06pm UTC](https://forum.freecodecamp.org/t/build-a-theme-switcher-build-a-theme-switcher/787963 "2026-05-06T12:06:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hrugonge](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hrugonge/32/400981_2.png) [@hrugonge](https://forum.freecodecamp.org/u/hrugonge)\
**Post date:** [May 6, 2026, 12:06pm UTC](https://forum.freecodecamp.org/t/build-a-theme-switcher-build-a-theme-switcher/787963/1 "2026-05-06T12:06:11Z")

</div>

### Tell us what’s happening:

Hey there!  
I have written the code to the best of my ability and the app is performing well when I interact with it but when I press the “Check Your Code” button this shows up on the console “21. Each of your name property values should match the text content of one of your li elements. Make sure these values are all in lowercase.”

Please guide me on what to do. Thank you

### Your code so far

```html
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Switcher</title>
  <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="menuitem" id="theme-dark" class="themes" >Dark</li>
    <li role="menuitem" id="theme-light" class="themes">Light</li>
  </ul>
  <div aria-live="polite"></div>

  

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

```

```css
/* file: styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

#status {
  text-align: center;
  min-height: 20px;
}

.theme-dark {
  background-color: gray;
}

.theme-light {
  background-color: green;
}

```

```js
/* file: script.js */
const themes = [{name:"Dark", message: "I am Dark"}, {name: "Light", message: "I am Light"}];

const btn = document.getElementById("theme-switcher-button");
const dropdown = document.getElementById("theme-dropdown");

btn.addEventListener("click", () => {

  let isOpen = btn.getAttribute("aria-expanded") === "true";

  if (isOpen) {

    dropdown.hidden = true;

  btn.setAttribute("aria-expanded","false");
  }else {

    dropdown.hidden = false;

  btn.setAttribute("aria-expanded","true");
  }

});

const dark = document.getElementById("theme-dark");
const light = document.getElementById("theme-light");
const ariaLive = document.querySelector(`[aria-live="polite"]`);
const htmlThemes = document.querySelectorAll(".themes");

let currentTheme = "";

htmlThemes.forEach((htmlTheme) => {

  htmlTheme.addEventListener("click", () => {

    const selectedTheme = htmlTheme.textContent.trim();

    const themeShade = themes.find((theme) => { 
      return theme.name === selectedTheme
    })

      if (currentTheme) {
        document.body.classList.remove(`theme-${currentTheme.toLowerCase()}`)

      }

    document.body.classList.add(`theme-${themeShade.name.toLowerCase()}`)

      currentTheme = themeShade.name

      ariaLive.innerText = themeShade.message

  });
})

```

### Your browser information:

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

### Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/javascript-v9/lab-theme-switcher/lab-theme-switcher)**
>
> Learn to Code — For Free

Github Link: [freeCodeCamp/curriculum/challenges/english/blocks/lab-theme-switcher/687ad7be1ff45032ccf1d92f.md at main · freeCodeCamp/freeCodeCamp · GitHub](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-theme-switcher/687ad7be1ff45032ccf1d92f.md)

---

<div class="post-metadata">

**Author:** ![sampatee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sampatee/32/408211_2.png) [@sampatee](https://forum.freecodecamp.org/u/sampatee)\
**Post date:** [May 6, 2026, 3:19pm UTC](https://forum.freecodecamp.org/t/build-a-theme-switcher-build-a-theme-switcher/787963/2 "2026-05-06T15:19:43Z")

</div>

hello!

> [@hrugonge](#):
>
> Make sure these values are all in lowercase.

> [@hrugonge](#):
>
> `const themes = [{name:"Dark", message: "I am Dark"}, {name: "Light", message: "I am Light"}];`

please make sure each of the `name` property values of your themes are in _lowercase_.

---

<div class="post-metadata">

**Author:** ![hrugonge](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hrugonge/32/400981_2.png) [@hrugonge](https://forum.freecodecamp.org/u/hrugonge)\
**Post date:** [May 7, 2026, 1:50pm UTC](https://forum.freecodecamp.org/t/build-a-theme-switcher-build-a-theme-switcher/787963/3 "2026-05-07T13:50:30Z")

</div>

It has worked 😀 👍 Thank you

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [June 4, 2026, 1:51pm UTC](https://forum.freecodecamp.org/t/build-a-theme-switcher-build-a-theme-switcher/787963/4 "2026-06-04T13:51:26Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.