<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;
}
View Compiled
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;
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.