Una Kravets • 6/22/2026

Modern CSS theming with light-dark(), contrast-color(), and style queries

This article explores a modern CSS theming system combining light-dark(), contrast-color(), and style queries to create dynamic components that adapt to light and dark modes. It covers using light-dark() for color-scheme-aware values, contrast-color() for WCAG-compliant text readability, and @container style() for branching custom palettes. The technique enables shadows in light mode that become glowing borders in dark mode, all without JavaScript. Published June 2026, it targets modern browsers and includes practical code examples for building responsive, accessible themes.

0 comments

#Custom Properties #Style Queries #Contrast Color