ColorScheme

ColorScheme renders a <meta name="color-scheme"> tag that tells the user agent which page color schemes are supported. It is limited to serializing the configured content value and does not infer schemes from CSS or page styling.

Props

prop	type	default	required	description
content	"normal" | "light" | "dark" | "light dark" | "dark light" | "only light"	headTags.colorScheme	No	Supported page color schemes advertised to the user agent.

Examples

Basic

Input:

<ColorScheme content="light dark" />

Output:

<meta name="color-scheme" content="light dark" />

Automatic

Uses the integration headTags.colorScheme value when no prop is provided.

Input:

// in astro.config.mjs integration config
eminence({
  headTags: {
    colorScheme: "light dark",
  },
});

<ColorScheme />

Output:

<meta name="color-scheme" content="light dark" />

Complete

Input:

<ColorScheme content="only light" />

Output:

<meta name="color-scheme" content="only light" />

Decisions Made

The component renders only when content is available

ColorScheme emits no tag when neither the content prop nor the integration configuration provides a value. This avoids outputting an incomplete meta tag with no declared scheme.

Integration config can provide the default

When content is omitted, ColorScheme falls back to headTags.colorScheme. This supports defining a site-wide default once while still allowing page-level overrides.

Source code

---
import config from "virtual:eminence-astro-suite/head-tags";

interface Props {
  /**
   * Supported page color schemes advertised to the user agent.
   * When omitted, the value falls back to the integration config.
   */
  content?:
    | "normal"
    | "light"
    | "dark"
    | "light dark"
    | "dark light"
    | "only light";
}

const { content = config.colorScheme } = Astro.props;
---

{content && <meta name="color-scheme" content={content} />}

Reference

• MDN: color-scheme meta name
• MDN: color-scheme CSS property
• WHATWG HTML Standard: meta color-scheme