<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;
  }
});