ThemeColor

ThemeColor renders one or two <meta name="theme-color"> tags to control browser chrome coloring. It is scoped to emitting those tags only and does not interact with CSS color schemes.

Props

The component accepts two mutually exclusive modes.

Single mode

prop	type	default	required	description
content	string	headTags.themeColor	Yes (in single mode)	A single color value applied to all color schemes.

Light and dark mode

prop	type	default	required	description
light	string	headTags.themeColor	Yes (in light/dark mode)	Color value for the light color scheme.
dark	string	headTags.themeColor	Yes (in light/dark mode)	Color value for the dark color scheme.

Examples

Basic

Input:

<ThemeColor content="#ffffff" />

Output:

<meta name="theme-color" content="#ffffff" />

Automatic

Uses the integration headTags.themeColor value when no props are provided.

Input:

// in astro.config.mjs integration config
eminence({
  headTags: {
    themeColor: "#ffffff",
  },
});

<ThemeColor />

Output:

<meta name="theme-color" content="#ffffff" />

Complete

Input:

<ThemeColor light="#ffffff" dark="#111111" />

Output:

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="#ffffff"
/>
<meta
  name="theme-color"
  media="(prefers-color-scheme: dark)"
  content="#111111"
/>

Decisions Made

Two mutually exclusive modes

The component accepts either a single content value or a light/dark pair, but not both. The single mode targets all color schemes uniformly; the paired mode uses media queries to apply different colors per scheme.

Both light and dark are required together

When using scheme-specific values, both light and dark must be provided. This prevents a broken state where only one scheme has a custom color.

Renders nothing when no value can be resolved

If no content or light/dark pair is available from props or integration config, the component emits no tag.

Source code

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

import { hasAnyProp } from "../utils";

type Props =
  | {
      content: string;
      light?: never;
      dark?: never;
    }
  | {
      content?: never;
      light: string;
      dark: string;
    }
  | {
      content?: never;
      light?: never;
      dark?: never;
    };

const { content, light, dark } = hasAnyProp(Astro.props)
  ? Astro.props
  : (config.themeColor ?? {});

export type ThemeColorValue = string | { light: string; dark: string };
---

{
  content !== undefined ? (
    <meta name="theme-color" content={content} />
  ) : light !== undefined && dark !== undefined ? (
    <>
      <meta
        name="theme-color"
        media="(prefers-color-scheme: light)"
        content={light}
      />
      <meta
        name="theme-color"
        media="(prefers-color-scheme: dark)"
        content={dark}
      />
    </>
  ) : null
}

Reference

• MDN: meta name=“theme-color”
• Web App Manifest: theme_color