<div class="select-area">
	<select class="theme">
		<option value="light">Light</option>
		<option value="dark">Dark</option>
		<option value="yellow">Yellow</option>
		<option value="material-theme">Mmboaa</option>
	</select>
</div>

<h1>Hello!</h1>

:root {
	--bg: #f1f1f1;
	--text: #222;
	--selectBG: #fff;
	--selectText: #222;
}

:root:has(.theme > [value="dark"]:checked) {
	--bg: #222;
	--text: #f1f1f1;
	--selectBG: #f1f1f1;
	--selectText: #222;
}
:root:has(.theme > [value="yellow"]:checked) {
	--bg: #fcdc73;
	--text: #193948;
	--selectBG: #e76268;
	--selectText: #193948;
}
:root:has(.theme > [value="material-theme"]:checked) {
	--bg: #263238;
	--text: #e76268;
	--selectBG: #fcdc73;
	--selectText: #263238;
}

* {
	margin: 0;
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	display: grid;
	place-content: center;
	font-family: sans-serif;
	font-size: 80px;
}

.select-area {
	min-width: 150px;
	background: var(--selectBG);
	margin: 0 auto 50px;
	display: flex;
	padding: 12px 15px;
	border-radius: 24px;
}

select {
	background: var(--selectBG);
	color: var(--selectText);
	width: 100%;
	border: none;
	outline: 0;
	cursor: pointer;
	font-weight: 600;
}

const selectElement = document.querySelector(".theme");
selectElement.addEventListener("change", () => {
	const selectedValue = selectElement.value;
	localStorage.setItem("theTheme", selectedValue);
});

window.addEventListener("load", () => {
	const storedValue = localStorage.getItem("theTheme");
	if (storedValue) {
		selectElement.value = storedValue;
	}
});