Design for AITema automático light-dark
Tema automático light-dark: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-199{color-scheme:light dark;font:600 14px/1 system-ui,sans-serif;color:#fff;background:#111827;border:1px solid #111827;border-radius:8px;padding:12px 24px;cursor:pointer;transition:background .15s,color .15s}
.btn-199:hover{background:#374151}
.btn-199:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
.btn-199:active{background:#000}
@supports (color:light-dark(#000,#fff)){
.btn-199{color:light-dark(#fff,#111827);background:light-dark(#111827,#f9fafb);border-color:light-dark(#111827,#f9fafb)}
.btn-199:hover{background:light-dark(#374151,#e5e7eb)}
.btn-199:active{background:light-dark(#000,#d1d5db)}
}
HTML
<button class="btn-199">Continue</button>Prompt
Un botón consciente del tema que se invierte solo con el ajuste del sistema usando light-dark(): en modo claro es oscuro #111827 con texto blanco, en modo oscuro es casi blanco #f9fafb con texto oscuro, con tonos de hover y active elegidos por esquema (#374151 o #e5e7eb, #000 o #d1d5db). Radio 8px, 14px semibold, padding 12px por 24px, color-scheme en light dark. Los valores del modo claro también van escritos como fallbacks planos antes del bloque @supports. Focus con outline índigo de 2px.