Newly availableHelpful when light-dark() improves stylesheet organization, fallback behavior, or cascade control.
Syntax and cascade Newly available

light-dark()

The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.

Syntax and cascade

Overview

The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.light-dark
123
123
120
17.5
123
17.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
:root {
  color-scheme: light dark;

  --bg: light-dark(#ffffff, #1a1a2e);
  --text: light-dark(#1a1a2e, #e0e0e0);
  --border: light-dark(#d1d5db, #374151);
  --accent: light-dark(#2563eb, #60a5fa);
}

body {
  background-color: var(--bg);
  color: var(--text);
}

.card {
  border: 1px solid var(--border);
}

Live demo

lightmode stylecard

light-dark() function lightmode stylecard demo.

PreviewFullscreen

Dark-mode Stylecard

light-dark() function Dark-mode stylecard demo.

PreviewFullscreen

aksentcol-toggle

light-dark() function aksentcol-toggle demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use light-dark() to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links

Powered by web-features