<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
This Pen doesn't use any external JavaScript resources.