lightDark

import { lightDark } from "@pitlane/theme";

function lightDark(light, dark): string;

A light-dark() color, resolved by the browser against the color-scheme property. A subtree that sets color-scheme flips whatever the media query says, which is what a theme toggle needs.

Both arguments may be token references, so a mode override of either primitive still reaches the result.

light-dark() is color-only. Use modes for anything else.

Parameters

light

string

The color for a light color-scheme

dark

string

The color for a dark color-scheme

Returns

string

The light-dark() function text

Example

tokens: { surface: { page: lightDark("#ffffff", "#1a1a1a") } }