<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>
  <div class="content">
      <ul class="menu">
    <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>
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;
  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.