Theme picker with previews

Three tiny interface thumbnails for light, dark and system appearance, with a tick on the chosen one.

Settings

Main color#3d6bff

Secondary color#9fb6ff

Size16px

Speed1x

Text

Code

index.html

<fieldset class="uv-rth"><legend>Appearance</legend><div class="gr"><label><input type="radio" name="uv-rth"><span class="pv lt" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Light</span></label><label><input type="radio" name="uv-rth"><span class="pv dk" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Dark</span></label><label><input type="radio" name="uv-rth" checked><span class="pv au" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">System</span></label></div></fieldset>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Radio buttons

See all Radio buttons

Bouncing dot radio

Radio buttonsHTML + CSS

Drawn ring radio

Radio buttonsHTML + CSS

Sliding pill selector

Radio buttonsHTML + CSS

Radio cards with icons

Radio buttonsHTML + CSS

Jumping dot radio

Radio buttonsHTML + CSS

Liquid fill radio

Radio buttonsHTML + CSS

Vertical tabs with light bar

Radio buttonsHTML + CSS

Pricing plan selector

Radio buttonsHTML + CSS

Where to use it

Showing beats telling when people choose an appearance. Each option is a miniature window with a sidebar, text lines and an accent button drawn in plain CSS: one light, one dark and one split diagonally for system. The selected thumbnail gets a double ring, a lift and a round check badge in the corner.

It fits settings pages for apps, editors and dashboards. The accent button inside each preview uses your main color, so people see how the brand reads in both themes before they switch.