JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
  <button type="button" data-type="default" class="is-active">Default</button>
  <button type="button" data-type="dark">Dark</button>
  <button type="button" data-type="pink">Pink</button>
</div>

<div class="container theme-default">
  <aside class="sidebar">Menu</aside>
  <main class="main">
    hello hello hello
  </main>
</div>

CSS

body {
  font-family: Arial, sans-serif;
}

/* you can put your default colours in here */
:root {
  --sidebar-bg: #EEE;
  --sidebar-text: #000;
  --main-bg: #FFF;
  --main-text: #000;
}

.buttons {
  margin-bottom: 24px;
}

button {
  padding: 8px 12px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

button.is-active {
  background-color: #BBB;
  color: #FFF;
}

/* variables are used in this main css here */
.container {
	display: flex;
}

.sidebar {
  flex-basis: 20%;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 1rem;
}

.main {
  flex-basis: 80%;
  background-color: var(--main-bg);
  color: var(--main-text);
  padding: 1rem;
}

/* update the colours for the variables here */

.theme-dark {
  --sidebar-bg: #000;
  --sidebar-text: #FFF;
  --main-bg: #CCC;
  --main-text: #000;
}

.theme-pink {
  --sidebar-bg: pink;
  --sidebar-text: #FFF;
  --main-bg: #FFF;
  --main-text: #000;
}

JavaScript

var buttons = Array.from(document.getElementsByTagName('button'));
var container = document.querySelector('.container');

buttons.forEach((el) => {
  var theme = el.getAttribute('data-type');

  el.addEventListener('click', function() {
  	// remove active class from all buttons
    buttons.forEach(button => button.classList.remove('is-active'));
    // add active class to current button
    el.classList.add('is-active');
  
    // loop through css classes remove theme class
    container.classList.forEach(function(className) {
      if (className.includes('theme')) {
        container.classList.remove(className);
      }
    });
    
    // add theme class
    container.classList.add('theme-' + theme);
  })
});