Design for AI

light-dark auto theme

light-dark auto theme: a CSS button. Copy the rules, or the prompt that rebuilds it.

modern-csslight-darkroundedtheme-awarefallback

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

A theme-aware button that flips itself with the OS setting using light-dark(): in light mode it is dark #111827 with white text, in dark mode it is near-white #f9fafb with dark text, hover and active shades chosen per scheme (#374151 or #e5e7eb, #000 or #d1d5db). 8px radius, 14px semibold, 12px by 24px padding, color-scheme set to light dark. The light-mode values are also written as plain fallbacks before the @supports block. Focus 2px indigo outline.

Same shelf