One Function, Both Themes

#light-dark()light-dark

Define light and dark values together with light-dark().

live_demo

code

.ld-demo:has(input:checked) {
  color-scheme: light;
}

.ld-card {
  background: light-dark(#f4f4f5, #141416);
  border: 1px solid light-dark(#d4d4d8, #2a2a2f);
}

.ld-card h4 {
  color: light-dark(#18181b, #fafafa);
}

.ld-card p {
  color: light-dark(#52525b, #a1a1aa);
}

.ld-badge {
  background: light-dark(#dcfce7, #052e16);
  color: light-dark(#166534, #34d399);
}