Design for AIlight-dark Auto-Theme
light-dark Auto-Theme: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Ein Theme-bewusster Button, der sich per light-dark() mit der OS-Einstellung umschaltet: im Light Mode ist er dunkel #111827 mit weißem Text, im Dark Mode fast weiß #f9fafb mit dunklem Text, Hover- und Active-Töne pro Schema gewählt (#374151 oder #e5e7eb, #000 oder #d1d5db). 8px Radius, 14px semibold, 12px mal 24px Padding, color-scheme auf light dark gesetzt. Die Light-Mode-Werte stehen zusätzlich als einfache Fallbacks vor dem @supports Block. Focus: 2px indigofarbene Outline.