Meta theme-color | @wrksz/themes

The themeColor prop keeps <meta name="theme-color"> in sync with the current theme. Browsers like Safari use this to color the tab bar and status bar.

Note

themeColor always writes to document.head, including when themeRoot is a shadow root. That is document chrome, not per-widget browser chrome.

Try it

Switch the theme and watch <meta name="theme-color"> follow. On Safari and installed PWAs the browser chrome changes with it.

theme-color…

Ada Lovelace

Browser chrome follows the theme

On Safari and installed PWAs the tab and status bar take this color.

OpenLater

app/layout.tsx

<ThemeProvider
  themes={["light", "dark", "sepia", "forest"]}
  themeColor={{ light: "#fcfcfc", dark: "#141414", sepia: "#f4ecd8", forest: "#1d2620" }}
>
  {children}
</ThemeProvider>

Per-theme colors

<ThemeProvider themeColor={{ light: "#ffffff", dark: "#0a0a0a" }}>
  {children}
</ThemeProvider>

The meta tag is created automatically if it doesn't exist and updated whenever the theme changes.

CSS variable

Pass a CSS variable and the browser resolves it against the current theme styles:

<ThemeProvider themeColor="var(--color-background)">
  {children}
</ThemeProvider>

Custom themes

Works with any number of themes:

<ThemeProvider
  themes={["light", "dark", "dim"]}
  themeColor={{ light: "#ffffff", dark: "#09090b", dim: "#1c1c1e" }}
>
  {children}
</ThemeProvider>