<nav>
  <button data-change='default'>Default</button>
  <button data-change='fun'>Fun</button>
  <button data-change='serious'>Serious</button>
</nav>


<section class='example'>
  
  <example-component>
    <h2>Hello! I'm a reusable component</h2>
    
    <p>It is true.</p>
  </example-component>

</section>

/* component */
example-component {
  display: block;
  padding: 10px;
}

/* context */
section.example example-component {
  margin-top: 20px;
}


/* THEMES */
/* this will target the body - ONLY if it as this value */
/* in our case / the buttons set the theme name */
body[data-theme="default"] {
	background-color: wheat;
}



body[data-theme="fun"] {
	background-color: var(--pe-red);
}

body[data-theme="fun"] example-component {
	background-color: var(--pe-red-light);
	border-radius: 6px;
}



body[data-theme="serious"] {
	background-color: lightgray;
}









































































body {
	padding: 30px;
}

// get the "body" element node and point this reference to it
var site = document.querySelector('body');


// create a function that changes the 'theme'
function changeTheme(chosenThemeName) {
  site.dataset.theme = chosenThemeName;
}


// listen for clicks
document.addEventListener('click', function(click) {

  // if the clicks happen on the right buttons...
  if ( click.target.matches('button') ) {
    // use the data-change thing to set the new theme
    changeTheme(click.target.dataset.change);
  }
});


// note that you can call the "event" argument whatever you want
// here we named it click to confuse and enlighten you


// start er off
changeTheme('default');
// normally we'd just add the data-theme to the body, but we're in CodePen

External CSS

  1. https://codepen.io/perpetual-education/pen/eYWBKpL.css

External JavaScript

This Pen doesn't use any external JavaScript resources.