Early Access
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
<meta name="color-scheme" content="light" />
<meta name="color-scheme" content="dark" />
<meta name="color-scheme" content="light dark" />
Code Examples
<meta name="color-scheme" content="light dark" />
<meta name="color-scheme" content="light" />
<meta name="color-scheme" content="dark" />
<meta name="color-scheme" content="" />
Recommendations
- Avoid Using Only DarkWhile 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 CSSIn 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
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">
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">
color-scheme
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">
default-style
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">
format-detection
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">
Community