<meta name="color-scheme">
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2022.
Thecolor-scheme value for thename attribute of the<meta> element indicates a suggested color scheme that user agents should use for a page.If specified, you define the color scheme using acontent attribute in the<meta> element with a valid CSScolor-scheme value.
The theme color works at thedocument level in the same way that the CSScolor-scheme property specifies the preferred and accepted color schemes ofindividual elements.The primary use for<meta name="color-scheme"> is to indicate compatibility and order of preference for light and dark color modes.For example, to indicate that a document prefers dark mode but also supports light mode:
<meta name="color-scheme" content="dark light" />Your styles can adapt to the current color scheme using theprefers-color-scheme CSS media feature.
Usage notes
A<meta name="color-scheme"> element has the following additional attributes:
contentA
<meta>element withname=color-schememust have acontentattribute that defines the color scheme as a CSScolor-schemevalue.Thecontentattribute may be one of the following:normalThe document is unaware of color schemes and should be rendered using the default color palette.
light,dark,light dark,dark lightOne or more color schemes supported by the document.Multiple color schemes indicates that the first scheme is preferred by the document, but that the second scheme is acceptable if the user prefers it.Specifying the same color scheme multiple times has the same effect as specifying it once.
only lightIndicates that the documentonly supports light mode, with a light background and dark foreground colors.
only darkis invalid, because forcing a document to render in dark mode when it isn't compatible can result in unreadable content and all major browsers default to light mode if not otherwise configured.
mediaOptionalAny valid media type or query.If provided, the options for the document's color scheme defined in the
contentattribute are suggested to the browser when the media query matches.This is mostly useful for theprefers-color-schemeCSS media feature.
Examples
Using a color-scheme keyword
The following example indicates to the browser that the page supports both light and dark themes.Whether the light or dark color scheme is used depends on user preferences such as OS-level settings or the browser settings:
<meta name="color-scheme" content="light dark" />Specifications
| Specification |
|---|
| HTML # meta-color-scheme |
Browser compatibility
See also
color-schemeCSS propertyprefers-color-schememedia query