<div class="card"><h2>Hello! this is a dark theme!</h2></div>

<span id="theme_toggler">
  Change theme
</span>
:root{
  --body-bg: #f5f5f5;
  --card-bg: #e0e0e0;
  --card-bd-col: #bdbdbd;
  --text-color:#252525;
}
.dark_mode{
  --body-bg: #252525;
  --card-bg: #555;
  --card-bd-col: #212121;
  --text-color:#f5f5f5;
}
body{
  margin: 0;
  background: var(--body-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.card{
  padding: 20px;
  background: var(--card-bg);
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,.3);
  border: 1px solid var(--card-bd-col);
  max-width: 300px;
  border-radius: 10px;
}

.card>h2{
  color: var(--text-color);
}

#theme_toggler{
  position: absolute;
  bottom: 5%;
  right: 5%;
  background: #0096c3;
  padding: 20px;
  border-radius:30px;
  color: #fff;
  cursor: pointer;
}
let theme_toggler = document.querySelector('#theme_toggler');

theme_toggler.addEventListener('click', function(){ 
    document.body.classList.toggle('dark_mode');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.