A walkthrough of combining four modern CSS features to build a fully adaptive theming system: `@property`, `light-dark()`, `contrast-color()`, and `@container style()` queries. The technique separates macro theming (page-level light/dark via `light-dark()`) from micro theming (per-component contrast via `contrast-color()`). In light mode, cards use layered box shadows for elevation; in dark mode, those layers go transparent and neon-ish border glows appear instead, derived from the card's own background using relative color syntax. Style queries then branch into hue-tinted text palettes rather than snapping to pure black or white. The entire system is driven by a single `--brand-color` per card. All features reached Baseline Newly Available status in May 2026, with the optional `@function` cleanup limited to Chrome 139+.
Table of contents
Step 1: light-dark() as the foundation #Step 2: Swap the elevation mechanism #Step 3: Automatic contrast with contrast-color() #Step 4: Customizable palettes with style queries #Putting it all together #Browser support #Conclusion #42.8K Impressions1 Comment