Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

While everything seems like it should be working, i can’t get the theme to change.

My CSS for works if I manually add the class to the body.
In my java code, however, my theme dose not want to change. I am pretty sure to use the .setAttribute(“class”, “theme”) correctly.

What’s going on ! D:

Your code so far

<!-- 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 id="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-light">Light</li>
    <li role="menuitem" id="theme-dark">Dark</li>
    <li role="menuitem" id="theme-chippiot">Chippiot</li>
  </ul>
  <div id="msg" aria-live="polite"></div>

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

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

body[class="theme-light"]{
  background-color: #fff;
}

body[class="theme-chippiot"]{
  background: repeating-linear-gradient(grey, lightgrey, grey 20%);
}

body[class="theme-dark"]{
  background-color: black;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  display:flex;
  list-style-type: none;
  font-weight: 600;
  align-items:center;
  justify-content: center;
  height:40px;
  width:100px;
  margin: 5px;
  background-color:lightblue;
  border-radius: 5px;
}

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

#msg{
  height: 20px;
}

/* file: script.js */
const themes = [
  {
    name: "light",
    message: "Super light for your back"
  },
  {
    name: "dark",
    message: "Can't see nothing !"
  },
  {
    name: "chippiot",
    message: "Cute as a cat"
  }
]

const btnEl = document.getElementById("theme-switcher-button");
const dropDEl = document.getElementById("theme-dropdown")
const msgEl = document.querySelector("#msg");
const menuItems = document.querySelectorAll(`[role="menuitem"]`);
const body = document.getElementById("body")

btnEl.addEventListener("click", () => {
  if(dropDEl.hidden === false){
    dropDEl.hidden = true;
    btnEl.setAttribute("aria-expanded", "false")
  }
  else{
    dropDEl.hidden = false;
  btnEl.setAttribute("aria-expanded", "true");
  }
});

menuItems.forEach((menuItem, index) => {
  menuItem.addEventListener("click", () => {
    dropDEl.hidden = true;
    body.setAttribute = ("class", `"theme-${themes[index].name}"`)
    console.log(themes[index].name)
    msg.innerText = themes[index].message;
    console.log(body.setAttribute)
  })
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

1 Like
3

you should look into how seAttribute work, you are not adding any class to body like this

1 Like
4

Oh yeah, i sent outdated thing. I tried :

body.setAttribute("class", `"theme-${themes[index].name}"`);

But it still won’t work.

Edit : figured that i should get the ‘ “ ‘out. Could you explain why to me ?

Also : when switching to the “chippiot” theme, there is no transition. Is there anything i can do ?

5

when you write a class you write class="classnName", right? not class='"className"'

1 Like
6

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