---
title: "color-scheme · Meta Tag · zhead"
canonical_url: "https://zhead.dev/meta/color-scheme"
last_updated: "2026-08-13T08:00:02.970Z"
meta:
  description: "Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls."
  "og:description": "Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls."
  "og:title": "color-scheme · Meta Tag · zhead"
---

Meta tags

# color-scheme

Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls.

## Parameters

light

The page supports a light color scheme.

```
<meta name="color-scheme" content="light">
```

dark

The page supports a dark color scheme.

```
<meta name="color-scheme" content="dark">
```

light dark

The page supports both schemes and prefers light when no user preference is known.

```
<meta name="color-scheme" content="light dark">
```

## Code examples

Good example

```
<meta name="color-scheme" content="light dark">
```

Declares support for both common schemes, with light listed first as the fallback preference.

Good example

```
<meta name="color-scheme" content="dark">
```

Valid for a page designed to render only with a dark color scheme.

Avoid this example

```
<meta name="color-scheme" content="light dark">
```

Wrong when the page has no dark palette. Declaring support does not create the styles for you.

Avoid this example

```
<meta name="color-scheme" content="">
```

An empty tag declares no supported scheme. Omit the tag when the page has nothing to declare.

## Recommendations

- 01 Declare Only Working Schemes A browser may apply a declared scheme to form controls, scrollbars, and the page canvas. Make sure the page itself is readable in every scheme you list.
- 02 Set the CSS Property Too Set color-scheme on the root element so native controls and descendants use the same schemes after CSS loads.

## Related documentation

- [HTML Living Standard: Semantics](https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme)
- [drafts.csswg.org: Css Color Adjust](https://drafts.csswg.org/css-color-adjust/#color-scheme-prop)

## Related meta tags

### [application-name](https://zhead.dev/meta/application-name)

name

Gives browsers a short name for the web application represented by the page. A browser may use it instead of the page title in bookmarks or other interface labels.

```
<meta name="application-name" content="Zhead">
```

A short application name that stays useful when the page title changes.

### [charset](https://zhead.dev/meta/charset)

charset

Declares the character encoding used by the HTML document. In modern HTML, the value must be UTF-8.

```
<meta charset="utf-8">
```

The required character encoding for modern HTML.

### [color-scheme](https://zhead.dev/meta/color-scheme)

name

Tells the browser which color schemes the page can render. The browser can use this early, before the stylesheet loads, to choose a suitable canvas and native controls.

```
<meta name="color-scheme" content="light dark">
```

Declares support for both common schemes, with light listed first as the fallback preference.

### [default-style](https://zhead.dev/meta/default-style)

http-equiv

Selects the preferred CSS style sheet set by name when a page offers alternate titled stylesheets. Browser support is limited.

```
<meta http-equiv="default-style" content="Main Style">
```

Valid when a linked stylesheet set has the exact title Main Style.

### [format-detection](https://zhead.dev/meta/format-detection)

name

An Apple extension that can stop Safari on iOS from turning text that looks like a telephone number into a call link.

```
<meta name="format-detection" content="telephone=no">
```

The value documented by Apple for disabling automatic telephone links in Safari on iOS.