Color Scheme

<script>
	let index = 0;
	const options = ['light', 'dark', 'light dark', 'only light', 'only dark'];
	const demo_wrapper = document.querySelector('.demo-color-scheme');
	const display = document.querySelector('.demo-color-scheme span');
	const button = document.querySelector('.demo-color-scheme button');

	button.addEventListener('click', () => {
		index = (index + 1) % options.length;
		demo_wrapper.style.colorScheme = options[index];
		display.textContent = options[index];
	});
</script>

<div class="demo-color-scheme">
	<h1>Color Scheme</h1>
	<p>Acive color scheme: <span>light</span></p>
	<button>Change Scheme</button>
</div>

<style>
	.demo-color-scheme {
		color-scheme: light;

		/* RESET TO INITIAL IGNORE */
		&,
		h1,
		button {
			color: initial;
			background: initial;
			font-family: initial;
			font-size: initial;
		}
	}
</style>