Live
x
<div class="buttons"> <button id="light">Light</button> <button id="dark">Dark</button></div><div class="wrapper"> <div class="content">The colors are based on the selected scheme</div></div>
Live
xxxxxxxxxx27
.content { display: inline-block; padding: 1rem; color: black; background: white; border: 1px solid black;}.dark .content { color: white; background: black;}/* 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
xxxxxxxxxx28
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'); // Remove or add dark class const container = document.querySelector('.wrapper'); if (schema == 'dark') { container.classList.add('dark'); } else { container.classList.remove('dark'); }}document.getElementById('light').addEventListener('click', () => { selectSchema('light');});document.getElementById('dark').addEventListener('click', (e) => { selectSchema('dark');});// Activate initial scheme based on OSif (window.matchMedia('(prefers-color-scheme: dark)')) { selectSchema('dark');} else { selectSchema('light');}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.