Tema con vista previa

Tres miniaturas de interfaz para apariencia clara, oscura y del sistema, con un check en la elegida.

Ajustes

Color principal#3d6bff

Color secundario#9fb6ff

Tamaño16px

Velocidad1x

Texto

Código

index.html

<fieldset class="uv-rth"><legend>Apariencia</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">Claro</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">Oscuro</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">Sistema</span></label></div></fieldset>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Radio buttons

Ver todos: Radio buttons

Radio con punto que rebota

Radio buttonsHTML + CSS

Radio con anillo dibujado

Radio buttonsHTML + CSS

Selector con píldora deslizante

Radio buttonsHTML + CSS

Tarjetas radio con icono

Radio buttonsHTML + CSS

Radio con punto saltarín

Radio buttonsHTML + CSS

Radio con relleno líquido

Radio buttonsHTML + CSS

Pestañas verticales con luz

Radio buttonsHTML + CSS

Selector de planes

Radio buttonsHTML + CSS

Dónde usarlo

Enseñar funciona mejor que explicar cuando alguien elige apariencia. Cada opción es una ventana en miniatura con barra lateral, líneas de texto y un botón de acento dibujados solo con CSS: una clara, una oscura y otra partida en diagonal para el sistema. La miniatura elegida recibe un doble anillo, se eleva y muestra un check redondo en la esquina.

Encaja en la página de ajustes de apps, editores y paneles. El botón de acento de cada miniatura usa tu color principal, así que se ve cómo queda la marca en los dos temas.