Design for AILight-Dark-Farben
Light-Dark-Farben: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
light-dark() in one line
Each color declares both values; the browser picks based on color-scheme.
Read the specCSS
.card-049 {
color-scheme: light dark;
width: 290px;
padding: 22px;
background: light-dark(#fafaf9,#1c1917);
color: light-dark(#1c1917,#fafaf9);
border: 1px solid light-dark(#e7e5e4,#44403c);
border-radius: 14px;
box-shadow: 0 4px 16px light-dark(rgba(0,0,0,.06),rgba(0,0,0,.4));
font-family: system-ui,sans-serif
}
.card-049 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-049 p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
color: light-dark(#57534e,#a8a29e)
}
.card-049 a {
display: inline-block;
padding: 8px 14px;
border-radius: 8px;
background: light-dark(#1c1917,#fafaf9);
color: light-dark(#fafaf9,#1c1917);
font-size: 13px;
font-weight: 600;
text-decoration: none
}
.card-049 a:hover {
opacity: .85
}
.card-049 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-049">
<h3>light-dark() in one line</h3>
<p>Each color declares both values; the browser picks based on color-scheme.</p>
<a href="#">Read the spec</a>
</article>Prompt
Erstelle eine 290px Card, die color-scheme: light dark setzt und die light-dark() Funktion für jede Farbe nutzt: Hintergrund light-dark(#fafaf9,#1c1917), Text light-dark(#1c1917,#fafaf9), Rahmen 1px light-dark(#e7e5e4,#44403c), Schatten-Alpha .06 im Light und .4 im Dark Mode, gedämpfter Text light-dark(#57534e,#a8a29e). 14px Radius, 22px Padding, 18px Titel, 14px Absatz und ein kleiner Button, dessen Hintergrund- und Textfarben zwischen den Modi invertieren (dunkler Button im Light Mode, heller Button im Dark Mode), 85% Deckkraft beim Hover.