<body>
  <header>
    <ul class="theme-list">
      <li><button data-name="base">Base Theme</button></li>
      <li><button data-name="radical">RaDiCaL Thǝmǝ</button></li>
      <li><button data-name="large">Large Font Theme</button></li>
    </ul>
  </header>
  <div class="content">
    <aside>
      <ul class="menu">
        <li>Home</li>
        <li>Blog</li>
        <li>Contact</li>
      </ul>
    </aside>
    <section id='main'>
      <h3>Hello, this is my cool site!</h3>
      <p>Look at all the neat things I write about!</p>
      <p>Click my ads so I can sustain myself off a passive income!</p>
    </section>
  </div>
</body>
body {
  background-color: var(--bg-color);
  color: var(--font-color);
  font-size: var(--font-size);
}

.content {
  display: flex;
}

.theme-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding-left:0;
  list-style: none;
}

#main {
  background-color:var( --content-bg-color);
  border: 1px solid #333;
  margin-left: 20px;
  padding: 14px;
  width: 550px;
}

.menu {
  font-family: var(--menu-font);
  padding-left: 10px;
}

.menu li {
  list-style: none;
  margin-bottom: 10px;
  margin-left: 0;
 
}

:root {
  --bg-color: #33ffcc;
  --font-color: black;
  --font-size: 14px;
  --content-bg-color: #fefefe;
  --menu-font: Helvetica, 'Courier New', san-serif;
}

.radical-theme {
    --bg-color: #ff31fa;
    --font-color: white;
    --content-bg-color: #00eeff;
    --menu-font: 'Lucida Grande', Sitka, san-serif;
}

.large-theme {
  --bg-color: #2EBD99;
  --font-size: 20px;
}

//Get the list of theme buttons
let list = document.querySelectorAll('.theme-list button');

//set up our click handler for later
let onClick = (e)=> {
  //pull out the name from the button's data attributes
  let selectedTheme = e.target.dataset.name;
  let body = document.querySelector('body');
  
  //select the body tag and overwrite its applied classes 
  if(selectedTheme === 'base') {
    //in the case of the base theme, we actually don't want any classes applied at all
    body.classList = '';
  } 
  else {
    body.classList = `${selectedTheme}-theme`;
  }
};

//loop through our list of buttons and apply an event handler to each
for(let button of list) {
  button.addEventListener('click', onClick);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.