# Dynamic Theming with CSS light-dark() and color-scheme

> CSS pattern for switching colors across themes without duplicate selectors

This CSS recipe combines the light-dark() color function with the color-scheme property to manage theme-dependent styling cleanly. By setting color-scheme at the root and overriding it with a data attribute, elements automatically resolve appropriate light or dark palette values inline.

## How it works

html { color-scheme: light dark; }

\[data-theme=light\] { color-scheme: light; }

\[data-theme=dark\] { color-scheme: dark; }

h1 { color: light-dark(red, orange); }

Tweet also links to an earlier explainer: https://x.com/jh3yy/status/1803208308741820603/video/1

## What it is for

- Implement light and dark mode styles without writing duplicate selector blocks
- Pair with custom theme-toggle animations and View Transitions
- Respect system-level color preferences while supporting manual user overrides

## Key points

- Defines default browser color-scheme support using light dark on root
- Enables explicit theme overrides using data-theme attributes
- Provides inline light-dark(lightColor, darkColor) declarations on individual selectors
- Removes the need for separate CSS variable overrides per theme block

## Pricing

Free

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: no
- Platforms: Web
- For: Front-end developers and web designers
- Alternative to: Prefers-color-scheme media query overrides, CSS variable swapping via class names
- Tags: css, theming, dark mode, front end, web design

## Why it was saved

- [@jh3yy, 31 October 2025](https://x.com/jh3yy/status/1984372822421225721): Kept as the paired recipe: light-dark() handles theme-dependent colors without writing duplicated selectors, complementing the flicker View Transitions trick.

## Related

- [Fancy-Border-Radius](https://xiry.app/resources/fancy-border-radius): Visual generator for creating organic blob shapes using CSS border-radius (Web app, Free)
- [Flickering Theme Switch with View Transitions and CSS linear()](https://xiry.app/resources/flickering-theme-switch-with-view-transitions-and-css-linear): CSS technique for flickering theme transitions using View Transitions and linear() curves (Tip, Free)
- [Liquid Glass](https://xiry.app/resources/liquid-glass): React component library for Apple-style liquid glass and blur effects. (Website, Open source)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)
- [CSS Frosted + Saturated Borders](https://xiry.app/resources/css-frosted-saturated-borders): CSS technique for dynamic, semi-transparent borders using background-clip and backdrop-filter (Tip, Free)
- [Light/dark mode favicons via media attribute](https://xiry.app/resources/light-dark-mode-favicons-via-media-attribute): HTML technique to switch browser favicons based on system color scheme (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/dynamic-theming-with-css-light-dark-and-color-scheme

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.