Build a Theme Switcher

JavaScript
1

So, a small issue.

While I did get all of the tests correct, there’s still some issue with the color and background-color properties when I ensure the body element gets the correct class name.

The respective properties in the body element should change to those new values, but when I inspected the DOM, while the body element gets the correct class name, the CSSS styles associated with it are not working. I keep getting ‘invalid property value’, but the values are formatted correctly.

Here’s my code first.

<!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 class="">
  <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-light">Light</li>
    <li role="menu-item" id="theme-dark">Dark</li>
    <li role="menu-item" id="theme-warm">Warm</li>
    <li role="menu-item" id="theme-cool">Cool</li>
  </ul>
  <p aria-live="polite" id="message"></p>
  <script src="./script.js"></script>
</body>
</html>

body {
  margin: 0;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  width: 100px;
  line-height: 2rem;
}

li:hover{
  background-color: gray;
  color: white;
}

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

.theme-light{
  color: "#0a0a23";
  background-color: "#ffffff";
}
.theme-dark{
  color: "#fff";
  background-color: "#000";
}

.theme-warm{
  color: "#000";
}

.theme-cool{
  color: "#ee0";
}

const button = document.getElementById("theme-switcher-button");
const themeDropdown = document.getElementById("theme-dropdown");
const themeBtns = document.querySelectorAll("#theme-dropdown li[role='menu-item']");
const message = document.querySelector('p[aria-live="polite"]');

const body = document.querySelector('body');

const themes = [
  {
    name: "light",
    message: "Light theme activated!"
  },
  {
    name: "dark",
    message: "Dark theme activated!",
    
  },
  {
    name: "warm",
    message: "Warm theme activated!",
    
  },
  {
    name: "cool",
    message: "Cool theme activated!"
  }
]

button.addEventListener("click", () => {
  toggleDropdown();
})

function toggleDropdown() {
  themeDropdown.hidden = !themeDropdown.hidden;
  button.setAttribute("aria-expanded", themeDropdown.hidden === true ? "false" : "true");
}


  [...themeBtns].forEach(btn => {
    btn.addEventListener("click", () => {
      body.className = btn.id;
      console.log(body.className);
      message.textContent = themes[themes.findIndex(el => el.name === btn.id.substring(6))].message;
    })
  })
2

share a link to the challenge page please

3

these are invalid, you do not use quotes for colors

4

Oh,…..I see it now. Thank you!