/* 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