Meta theme-color

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.

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>