--- title: Modern CSS theming with light-dark(), contrast-color(),... description: A walkthrough of combining four modern CSS features to build a fully adaptive theming system: `@property`, `light-dark()`, `contrast-color()`, and `@container... canonical: https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Modern CSS theming with light-dark(), contrast-color(), and style queries | daily.dev og:description: A walkthrough of combining four modern CSS features to build a fully adaptive theming system: `@property`, `light-dark()`, `contrast-color()`, and `@container... og:url: https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj og:image: https://api.daily.dev/og/posts/xpRSUOenJ.png og:image:alt: Modern CSS theming with light-dark(), contrast-color(), and style queries og:image:width: 1200 og:image:height: 630 og:locale: 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: ## Questions this post answers ### How do I automatically pick readable text color against any background color in CSS? Use the contrast-color() function, which takes a color value and returns either black or white, whichever provides higher contrast against that background, based on the WCAG contrast algorithm. For example, setting color: contrast-color(var(--bg)) on a card ensures the text is always readable regardless of the brand color used as the background. _Developers building adaptive UI themes can find implementation patterns like this through daily.dev._ ### What's the difference between light-dark() and prefers-color-scheme media queries in CSS? The light-dark() function resolves based on the element's computed color-scheme property rather than directly reading the prefers-color-scheme media query, which means it can be overridden at any level in the cascade. Setting color-scheme: light dark on the root respects OS preference by default, but a nested selector like .dark-section can force color-scheme: dark, and every light-dark() call inside inherits and resolves to its dark value, making it more composable than media queries. _Teams deciding between theming approaches can compare CSS techniques like this via daily.dev._ ### How can I create a shadow effect in light mode that switches to a glowing border in dark mode using only CSS? Define all shadow layers in a single box-shadow declaration, using light-dark() per layer's color to make unwanted layers transparent in the wrong mode: keep gray drop-shadow layers visible in light mode and transparent in dark mode, while inset glow layers using relative color syntax like oklch(from var(--bg) calc(l + 0.5) c h / 0.5) stay transparent in light mode and visible in dark mode. _Frontend developers implementing dark mode elevation effects can track techniques like this on daily.dev._ ## 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 --- 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"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","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj"},"datePublished":"2026-06-22T22:27:30.414Z","dateModified":"2026-09-14T05:57:51.416Z","description":"A walkthrough of combining four modern CSS features to build a fully adaptive theming system: `@property`, `light-dark()`, `contrast-color()`, and `@container...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/31c9eb4168593fbb52c5d1d30233ecb2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/31c9eb4168593fbb52c5d1d30233ecb2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Una Kravets","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Una Kravets","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/7f36e43efe8542e68e3f3d20328ee8e7","url":"https://daily.dev/sources/una"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":22},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,accessibility","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Una Kravets","item":"https://daily.dev/sources/una"},{"@type":"ListItem","position":3,"name":"Modern CSS theming with light-dark(), contrast-color(), and style queries"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj","comment":[{"@type":"Comment","text":"Thanks for the information.","datePublished":"2026-06-29T09:52:07.334Z","url":"https://daily.dev/posts/xpRSUOenJ#c-4UzzPNdU1","author":{"@type":"Person","name":"Jibon Krishna Roy","url":"https://daily.dev/jibonkrishnaroy","image":"https://lh3.googleusercontent.com/a/ACg8ocIaoOOW6GkBaZgUYqEW96neuO8N1W3rzBgE4rfqk9R0R1Czt6yL=s96-c"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/modern-css-theming-with-light-dark-contrast-color-and-style-queries-xprsuoenj#faq","mainEntity":[{"@type":"Question","name":"How do I automatically pick readable text color against any background color in CSS?","acceptedAnswer":{"@type":"Answer","text":"Use the contrast-color() function, which takes a color value and returns either black or white, whichever provides higher contrast against that background, based on the WCAG contrast algorithm. For example, setting color: contrast-color(var(--bg)) on a card ensures the text is always readable regardless of the brand color used as the background. Developers building adaptive UI themes can find implementation patterns like this through daily.dev."}},{"@type":"Question","name":"What's the difference between light-dark() and prefers-color-scheme media queries in CSS?","acceptedAnswer":{"@type":"Answer","text":"The light-dark() function resolves based on the element's computed color-scheme property rather than directly reading the prefers-color-scheme media query, which means it can be overridden at any level in the cascade. Setting color-scheme: light dark on the root respects OS preference by default, but a nested selector like .dark-section can force color-scheme: dark, and every light-dark() call inside inherits and resolves to its dark value, making it more composable than media queries. Teams deciding between theming approaches can compare CSS techniques like this via daily.dev."}},{"@type":"Question","name":"How can I create a shadow effect in light mode that switches to a glowing border in dark mode using only CSS?","acceptedAnswer":{"@type":"Answer","text":"Define all shadow layers in a single box-shadow declaration, using light-dark() per layer's color to make unwanted layers transparent in the wrong mode: keep gray drop-shadow layers visible in light mode and transparent in dark mode, while inset glow layers using relative color syntax like oklch(from var(--bg) calc(l + 0.5) c h / 0.5) stay transparent in light mode and visible in dark mode. Frontend developers implementing dark mode elevation effects can track techniques like this on daily.dev."}}]} ```