css-custom-functions.md

CSS Custom Functions (aka Mixins)

• Intent to Ship: CSS Custom Functions (@function)
• Proposal: Custom CSS Functions & Mixins
• Custom CSS Custom Functions + Nested Style Queries: --light-dark()

@function --light-dark(--light, --dark) {
   result: var(--light);
   @media (prefers-color-scheme: dark) {
     result: var(--dark);
   }
}

div {
  background-image: --light-dark(black-logo.png, white-logo.png);
}