---
title: "Modern CSS theming with light-dark(), contrast-color(), and style queries"
url: https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj
source_url: https://una.im/modern-css-theming
type: article
source: "Una Kravets"
published: 2026-06-22T22:27:30.414Z
updated: 2026-06-22T22:39:19.882Z
tags: ["css", "accessibility"]
reading_time: 6
upvotes: 22
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

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

**[Una Kravets](https://daily.dev/sources/una)** · 6 min read · 22 upvotes · 1 comments

## Summary

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+.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://una.im/modern-css-theming>

## Community discussion

Top comments from developers on daily.dev.

**@jibonkrishnaroy** · 0 upvotes

> Thanks for the information.

## Similar posts on daily.dev

- [A few ways of specifying per-theme colours in only CSS — Chris Morgan](https://daily.dev/posts/a-few-ways-of-specifying-per-theme-colours-in-only-css-chris-morgan-yeihwzack) · Lobsters · 0 upvotes · 0 comments
- [contrast-color\(\) beyond black & white](https://daily.dev/posts/contrast-color-beyond-black-white-ohb43x9xc) · Una Kravets · 0 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj)