Subtle dark-mode surfaces with color-mix()

The blog post cards on this site need a card background that’s a touch lighter than the page in dark mode, but plain white in light mode. Instead of defining a third color variable, I mix the existing --color-surface halfway into --color-bg in the dark slot of light-dark():

.blog-post-card {
  background: light-dark(
    var(--color-bg),
    color-mix(in oklch, var(--color-surface) 50%, var(--color-bg))
  );
}

The in oklch interpolation keeps the perceived lightness even, so the card reads as “a step up from the page” without ever looking muddy. Change the theme’s surface or background tokens and every card adjusts for free.