Theme Picker Radio Cards
Light, dark and system options drawn as tiny app windows. The chosen preview lifts inside an accent ring, its mock button grows to full width and the radio under it fills.
Also known as: light dark system theme picker, appearance settings css, theme selector radio buttons.
HTML
<div class="rad-theme-picker-cards" role="radiogroup" aria-label="Theme">
<label>
<input type="radio" name="rad-theme-picker-cards" value="light" checked>
<span class="rad-theme-picker-cards-preview" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="rad-theme-picker-cards-label">Light</span>
</label>
<label>
<input type="radio" name="rad-theme-picker-cards" value="dark">
<span class="rad-theme-picker-cards-preview" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="rad-theme-picker-cards-label">Dark</span>
</label>
<label>
<input type="radio" name="rad-theme-picker-cards" value="system">
<span class="rad-theme-picker-cards-preview" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="rad-theme-picker-cards-label">System</span>
</label>
</div>CSS
.rad-theme-picker-cards {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
display: inline-flex;
gap: 0.9em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-theme-picker-cards label:nth-of-type(1) { --bg: #ffffff; --line: #dde2ea; }
.rad-theme-picker-cards label:nth-of-type(2) { --bg: #1e222b; --line: #3b4250; }
.rad-theme-picker-cards label:nth-of-type(3) { --bg: linear-gradient(135deg, #ffffff 50%, #1e222b 50%); --line: #8d95a5; }
.rad-theme-picker-cards label {
position: relative;
display: grid;
justify-items: center;
gap: 0.55em;
cursor: pointer;
}
.rad-theme-picker-cards input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-theme-picker-cards-preview {
display: flex;
flex-direction: column;
gap: 0.3em;
box-sizing: border-box;
width: 5.4em;
height: 3.6em;
padding: 0.55em;
border-radius: 0.6em;
background: var(--bg);
box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
transition: box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-theme-picker-cards-preview i {
display: block;
height: 0.32em;
border-radius: 0.2em;
background: var(--line);
}
.rad-theme-picker-cards-preview i:nth-child(1) { width: 55%; }
.rad-theme-picker-cards-preview i:nth-child(2) { width: 85%; }
.rad-theme-picker-cards-preview i:nth-child(3) {
width: 100%;
height: 0.6em;
margin-top: auto;
border-radius: 0.3em;
background: var(--c);
opacity: 0.5;
transform: scaleX(0.4);
transform-origin: left;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.3s ease;
}
.rad-theme-picker-cards label:hover .rad-theme-picker-cards-preview {
transform: translateY(-0.1em);
}
.rad-theme-picker-cards input:checked + .rad-theme-picker-cards-preview {
box-shadow: 0 0 0 0.15em var(--c);
transform: translateY(-0.2em);
}
.rad-theme-picker-cards input:checked + .rad-theme-picker-cards-preview i:nth-child(3) {
opacity: 1;
transform: scaleX(1);
}
.rad-theme-picker-cards-label {
display: flex;
align-items: center;
gap: 0.4em;
font-size: 0.85em;
font-weight: 600;
color: color-mix(in srgb, currentColor 65%, transparent);
transition: color 0.25s ease;
}
.rad-theme-picker-cards-label::before {
content: "";
width: 0.8em;
height: 0.8em;
border-radius: 50%;
box-shadow: inset 0 0 0 0.12em color-mix(in srgb, currentColor 35%, transparent);
transition: box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-theme-picker-cards input:checked ~ .rad-theme-picker-cards-label {
color: var(--c);
}
.rad-theme-picker-cards input:checked ~ .rad-theme-picker-cards-label::before {
box-shadow: inset 0 0 0 0.27em var(--c);
}
.rad-theme-picker-cards input:focus-visible + .rad-theme-picker-cards-preview {
outline: 0.12em dashed var(--c);
outline-offset: 0.3em;
}
@media (prefers-reduced-motion: reduce) {
.rad-theme-picker-cards, .rad-theme-picker-cards *, .rad-theme-picker-cards::before, .rad-theme-picker-cards::after, .rad-theme-picker-cards *::before, .rad-theme-picker-cards *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--rad-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--rad-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.