Live
x
<div class="buttons"> <button id="red" class="selected">Red</button> <button id="blue">Blue</button> <button id="green">Green</button></div><div id="wrapper" class="red"> <div class="content">The colors are based on the selected scheme</div></div>
Live
xxxxxxxxxx41
.content { display: inline-block; padding: 1rem; border: 1px solid black;}/* Theme specific styling */:root .red { --primary: red; --primary-dark: darkred;}:root .blue { --primary: blue; --primary-dark: darkblue;}:root .green { --primary: green; --primary-dark: darkgreen;}.content { color: var(--primary-dark); background: var(--primary);}/* Helpers */.buttons { margin-bottom: 1rem;}button { padding: 0.25rem 0.5rem; background: lightgray; border: none; border-radius: 4px;}button.selected { border: 1px solid darkgray;}
Live
xxxxxxxxxx21
function selectSchema(schema) { // Select button and unselect the other button document.querySelectorAll('button').forEach(el => el.classList.remove('selected')); document.getElementById(schema).classList.add('selected'); // Set schema class document.getElementById('wrapper').className = schema; }document.getElementById('red').addEventListener('click', () => { selectSchema('red');});document.getElementById('blue').addEventListener('click', (e) => { selectSchema('blue');});document.getElementById('green').addEventListener('click', (e) => { selectSchema('green');});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.