Question: I've been creating a website and I have made a night mode for it. Night Mode works fine for everything except buttons. How can I fix this problem?

HTML:

```
<section class="form" id="contact">
    <div class="form-main">
        <form>              
        <button type="button" id="pay">
            <p class="p">Proceed To Pay</p> 
        </button>       
    </form>
    </div>
</section>

```

CSS:

```
.darkTheme{
background-color: #000;
color: #fff;
transition: all 0.3s;}

```

JS:

```
let payBtn = document.querySelector('.p');
btn.addEventListener('click' , changeBg);

function changeBg(){
    console.log(payBtn);
    payBtn.classList.add('darkTheme');
}

```

Answer: 
After many attempts I found a way to fix the problem but it's kind of a long journey. First I wanted to use "classList.toggle" for the class that was in CSS. Since it didn't work as I wanted, I selected the button with Id;

```
let pay = document.getElementById('pay');

```

Then instead of using "classList.toggle" for the class in CSS I used conditional statements to get the same result I wanted.

```
if(pay.classList.contains('hello')){
    pay.classList.remove('hello');
    pay.style.backgroundColor = "#000";
    pay.style.color = "#fff";
}else{
    pay.style.backgroundColor = "#fff";
    pay.style.color = "#000";
    pay.className = "hello";
}

```

So I made 'hello' class to get the toggle effect and used style to get the desired output.
Finally it worked.
Here the full project hosted on codepen: <https://codepen.io/kisaraf/pen/vYXJwLE>
Thank You for everyone who tried to help me.
Check this out. You'll be able to easily toggle between the dark theme and the normal theme with this approach.

```js
let payBtn = document.querySelector("#pay");
payBtn.addEventListener("click", changeBg);

function changeBg() {
  console.log(payBtn);
  payBtn.classList.toggle("darkTheme");
}
```

```css
.darkTheme {
  background-color: #000;
  color: #fff;
  transition: all 0.3s;
}
```

```html
<section class="form" id="contact">
  <div class="form-main">
    <form>
      <button type="button" id="pay">
        <p class="p">Proceed To Pay</p>
      </button>
    </form>
  </div>
</section>
```