---
title: "lightDark"
description: "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."
url: "https://pitlane.tools/package/theme/function/lightDark"
---

# lightDark

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

```ts
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

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