<
zhead
>

Early Access

Meta Tags

color-scheme

Learn how to use the color-scheme meta tag to improve your site.

Instructs the browser on what color themes (light or dark mode) are supported and preferred for the content, ensuring visual consistency and accessibility.

Parameters

light
Indicates the web page is optimized for light themes.
<meta name="color-scheme" content="light" />
dark
Indicates the web page is optimized for dark themes.
<meta name="color-scheme" content="dark" />
light dark
Indicates the web page supports both light and dark themes, allowing the browser to match the system's theme.
<meta name="color-scheme" content="light dark" />

Code Examples

<meta name="color-scheme" content="light dark" />
Indicates to the browser that the site smoothly supports both light and dark themes, offering flexibility to match the user’s preferred theme setting.
<meta name="color-scheme" content="light" />
Indicates to the browser that the site is optimized specifically for light theme, ensuring visual consistency when users have a light mode preference.
<meta name="color-scheme" content="dark" />
Indicates the web page is only optimized for dark mode which may not be suitable for all users, potentially affecting accessibility and user experience in light mode environments.
<meta name="color-scheme" content="" />
Leaving the color-scheme meta tag empty or not defining it implies no optimization for either theme, leading to potential inconsistencies with user theme preferences.

Recommendations

  • Avoid Using Only Dark
    While it might be tempting to design for dark mode only due to its popularity, always include a light theme option to accommodate user preferences and accessibility needs.
  • Use Media Queries for Theme-specific CSS
    In conjunction with the color-scheme meta tag, use CSS media queries based on (prefers-color-scheme) to apply theme-specific styles, ensuring a seamless experience switching between themes.

Related Documentation

Related Meta Tags

application-name

name

Defines the name of the web application as it should be displayed when bookmarked or added to a mobile home screen.

<meta name="application-name" content="MyApp">
Simple, concise, and clearly displays the application's purpose or brand.

charset

charset

Defines the character encoding standard for the HTML document. Character encoding is essential for rendering text correctly in browsers.

<meta charset="charset" content="UTF-8">
Declares UTF-8 as the character encoding for the HTML document, supporting most characters and symbols in use today.

color-scheme

name

Instructs the browser on what color themes (light or dark mode) are supported and preferred for the content, ensuring visual consistency and accessibility.

<meta name="color-scheme" content="light dark">
Indicates to the browser that the site smoothly supports both light and dark themes, offering flexibility to match the user’s preferred theme setting.

default-style

http-equiv

Specifies the name of the preferred stylesheet to use on a web page. This allows users or user agents to choose the default stylesheet amongst many provided.

<meta http-equiv="default-style" content="Main Style">
Correct use case where "Main Style" is precisely the title of one of the page’s alternative stylesheets.

format-detection

name

Controls how telephone numbers, email addresses, and physical addresses are detected and displayed by the browser. By default, many browsers can automatically detect this information and style or link it accordingly, which might not always align with the web developers’ intentions.

<meta name="format-detection" content="telephone=no">
Prevents the browser from auto-detecting and linking phone numbers, allowing the site to control how and if phone numbers are clickable.