<div class="sidebar">
  <div id="theme" class="light">
    <ul class="list-group">
      <li class="list-group-item">Home</li>
      <li class="list-group-item">About</li>
      <li class="list-group-item">Contact</li>
      <li class="list-group-item">Register</li>
    </ul>
  </div>
</div>
<br>
<button class="btn btn-primary" onclick="changeTheme('light');"> Change Light theme </button>
<button class="btn btn-primary" onclick="changeTheme('dark');"> Change Dark theme </button>
:root{
  --libg : white;
  --licolor : black;
  --borderleft : blue;
  --libghover : #e1e1e8;
  --lihovercolor : blue;
}
.sidebar {
  width: 220px;
  .light {
    li {
      background-color : var(--libg);
      color : var(--licolor);
      border-left : 5px solid var(--borderleft);
      &:hover {
        background-color : var(--libghover);
        color : var(--lihovercolor);
      }
    }
  }
}
.sidebar {
  .dark {
  --libg : #151f2a;
  --licolor : white;
  --borderleft : blue;
  --libghover : black;
  --lihovercolor : white;
  }
}
function changeTheme(changeval) {
  if(changeval === 'light')
  document.getElementById('theme').classList.remove('dark');
  else
  document.getElementById('theme').classList.add(changeval);
  
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.