Design for AILight dark colors
Light dark colors: a CSS card. Copy the rules, or the prompt that rebuilds it.
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
Create a 290px card that sets color-scheme: light dark and uses the light-dark() function for every color: background light-dark(#fafaf9,#1c1917), text light-dark(#1c1917,#fafaf9), border 1px light-dark(#e7e5e4,#44403c), shadow alpha .06 in light and .4 in dark, muted text light-dark(#57534e,#a8a29e). 14px radius, 22px padding, 18px title, 14px paragraph, and a small button whose background and text colors invert between modes (dark button in light mode, light button in dark mode), 85% opacity on hover.