No Login Data Private Local Save

color‑scheme Meta Generator - Online Dark/Light Opt‑in

23
0
0
0

Color-Scheme Meta Generator

Generate the perfect <meta name="color-scheme"> tag and CSS for dark/light mode opt-in. Preview, copy, and deploy in seconds.

🌓 Light + Dark Both modes supported Recommended
🌗 Dark + Light Dark mode preferred
☀️ Light Only Single light mode
🌙 Dark Only Single dark mode
🔒☀️ Only Light Force light mode
🔒🌙 Only Dark Force dark mode
Light Mode Preview
Page Title
Button
Dark Mode Preview
Page Title
Button
HTML Meta Tag Place in <head>
<meta name="color-scheme" content="light dark">
CSS Property In your stylesheet
/* Applied to root element */ :root { color-scheme: light dark; }
CSS Media Query Responsive theming
/* Detect user system preference */ @media (prefers-color-scheme: dark) { /* Dark mode styles */ } @media (prefers-color-scheme: light) { /* Light mode styles */ }
Pro Tip: Use both the meta tag and the CSS color-scheme property together for maximum browser compatibility. The meta tag signals support early (before CSS loads), while the CSS property provides fine-grained control over specific elements.
Frequently Asked Questions
What is the color-scheme meta tag?
The <meta name="color-scheme"> tag tells browsers which color schemes (light, dark, or both) your web page supports. It was introduced to help browsers render native UI elements—like form controls, scrollbars, and auto-filled inputs—in the appropriate theme before your CSS loads. This prevents the infamous "flash of white" when a dark-mode user visits a dark-themed site. It's a simple one-line addition to your <head> that significantly improves user experience.
What's the difference between color-scheme and prefers-color-scheme?
color-scheme (the meta tag or CSS property) declares what your page supports—it's you telling the browser "I support dark mode." prefers-color-scheme (the CSS media query) detects the user's system preference—it lets you apply conditional styles based on whether the user prefers light or dark mode. Think of it this way: color-scheme is the capability flag, while prefers-color-scheme is the responsive styling tool. For a complete dark mode implementation, you typically use both.
What does the "only" keyword do in color-scheme?
The only keyword (e.g., only light or only dark) forces a specific color scheme and prevents the browser from making automatic adjustments. For example, only light tells the browser: "This page must always render in light mode, regardless of the user's system preference." Use this sparingly—only when you have a strong design reason to override user preferences. Most websites should use light dark to respect user choice and maximize accessibility.
Which browsers support the color-scheme meta tag?
The color-scheme meta tag and CSS property are supported in all modern browsers: Chrome 81+, Firefox 96+, Safari 13+ (desktop and iOS), and Edge 81+. It has excellent cross-browser coverage as of 2024, with over 94% global browser support. Older browsers simply ignore the tag, so it's safe to add it today without any negative side effects—it's a progressive enhancement.
Where exactly should I place the meta tag in my HTML?
Place the <meta name="color-scheme"> tag as early as possible inside the <head> section—ideally before any stylesheets or scripts. This ensures the browser knows about your color scheme support before it starts rendering the page, preventing any flash of incorrect theme. A good rule of thumb: put it right after the <meta charset="UTF-8"> and <meta name="viewport"> tags.
Can I use color-scheme on individual elements instead of the whole page?
Yes! The CSS color-scheme property can be applied to any element, not just :root. This is useful when you have a component that always looks best in a specific scheme—for example, a code editor widget that should always render in dark mode, or a print preview area that should always be light. Simply apply color-scheme: dark; or color-scheme: only light; to the specific container element.
Does the color-scheme meta tag affect SEO?
The color-scheme meta tag does not directly impact search engine rankings. However, it indirectly benefits SEO by improving user experience metrics like time-on-page and reducing bounce rates—especially for users who prefer dark mode. A site that respects user preferences feels more modern and accessible. Additionally, Google's Core Web Vitals and page experience signals reward good UX, and proper color-scheme handling contributes to a polished, professional appearance.
How do I implement a complete dark mode toggle for my website?
A complete dark mode implementation involves three layers: (1) Add the <meta name="color-scheme" content="light dark"> tag in your <head>. (2) Use :root { color-scheme: light dark; } in your CSS. (3) Write @media (prefers-color-scheme: dark) { } blocks with your dark theme styles. (4) For a manual toggle, use JavaScript to add a data-theme attribute to <html> and write corresponding CSS selectors. Store the user's choice in localStorage for persistence across visits.
Is "light dark" different from "dark light"?
Yes—the order matters when both values are specified. light dark means "I support both, but prefer light mode as the default." dark light means "I support both, but prefer dark mode as the default." The first value is the preferred or default scheme. Browsers use this information to decide which native UI elements to render when the user hasn't expressed a clear preference. For most websites, light dark is the safer choice since light mode is the traditional web default.

Copy the generated code above and paste it into your HTML <head> section. All modern browsers are supported.

🔧 Related Tools