<button class="toggle">Toggle background color</button>
body {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 100vh;
  background-color: #04142F;
  transition: background-color 0.2s ease-out;
}
body.light {
  background-color: #013BC2;
}

.toggle {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #013BC2;
  color: #efefef;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}
.light .toggle {
  background-color: #04142F;
}
// Get a reference to our body and toggle.
const body = document.querySelector('body');
const toggle = document.querySelector('.toggle');

// Listen for clicks on our toggle button.
toggle.addEventListener('click', () => {
  
  // Toggle a class on the body.
  body.classList.toggle("light");
  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.