p Select a theme option:
input#light(type='radio' name='theme' checked)
label(for='light' data-ico='☀️') light
input#dark(type='radio' name='theme')
label(for='dark' data-ico='🌙') dark

$back-0: #dbdce0; // light theme background
$back-1: #39393c; // dark theme background
$text-0: $back-1; // light theme text
$text-1: $back-0; // dark theme text

@property --perc {
	syntax: '<length-percentage>';
	initial-value: 0px;
	inherits: true
}

* { color: #0000; font: inherit }

body {
	--dark: 0;
	--perc: calc(var(--dark, 0)*100%);
	
	background: 
		linear-gradient(90deg, 
				$back-1 var(--perc), $back-0 0) fixed;
	font: 1.5em/ 1.5 sans-serif;
	text-align: center;
	transition: --perc .65s;
	
	&:has(#dark:checked) { --dark: 1 }
}

[type='radio'] {
	position: absolute;
	opacity: .001
}

p, label {
	background: 
		linear-gradient(90deg, 
				$text-1 var(--perc), $text-0 0) text fixed
}

label::before {
	margin-right: .125em;
	content: attr(data-ico) 
}