Design for AITema automático light-dark
Tema automático light-dark: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão sensível ao tema que se inverte sozinho conforme a configuração do sistema usando light-dark(): no modo claro é escuro #111827 com texto branco, no modo escuro é quase branco #f9fafb com texto escuro, com tons de hover e active escolhidos por esquema (#374151 ou #e5e7eb, #000 ou #d1d5db). Raio de 8px, 14px semibold, padding 12px por 24px, color-scheme definido como light dark. Os valores do modo claro também são escritos como fallbacks simples antes do bloco @supports. Focus com outline índigo de 2px.