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

DevFeed: [Modern CSS theming with light-dark(), contrast-color(), and style queries](<https://devfeed.tech/articles/modern-css-theming-with-light-dark-contrast-color-and-style-queries-28815.md>)

Original publisher: [Read original article](<https://una.im/modern-css-theming/>)

Published: 2026-06-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [color](<https://devfeed.tech/topics/color.md>), [Media Queries](<https://devfeed.tech/topics/media-queries.md>)

Tags: [color](<https://devfeed.tech/tags/color.md>), [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [dynamic-theming](<https://devfeed.tech/tags/dynamic-theming.md>), [media](<https://devfeed.tech/tags/media.md>), [scheme](<https://devfeed.tech/tags/scheme.md>), [support](<https://devfeed.tech/tags/support.md>), [themes](<https://devfeed.tech/tags/themes.md>)

## AI overview

This tutorial explains how to combine light-dark(), contrast-color(), style queries, custom properties, and related CSS color features to create adaptive themed components. It covers light and dark color schemes, context-sensitive palettes, automatic text contrast, and different elevation effects for each theme.

## Source excerpt

Combine three new CSS features to build fully adaptive themed components.