<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">
export type ColorScheme =
     /**
   * The page supports a light color scheme.
  **/
    'light'
    /**
   * The page supports a dark color scheme.
  **/
    'dark'
    /**
   * The page supports both schemes and prefers light when no user preference is known.
  **/
    '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

Related meta tags

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

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

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

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

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.