Skip to content
Theme UI
GitHub

Theme Color Meta Tag

Learn more about <meta /> theme color on MDN and CSS Tricks.

with useThemeUI

Grab your theme from the context with useThemeUI, pick either a background or accent color from the palette, then use your framework’s method of adding a meta tag to add to <head />.

react-helmet in Gatsby

import { Helmet } from 'react-helmet'
import { useThemeUI } from 'theme-ui'
function Example() {
const { theme } = useThemeUI()
return (
<Helmet>
<meta name="theme-color" content={theme.colors.primary} />
</Helmet>
)
}

next/head in Next.js

import Head from 'next/head'
function Example() {
const { theme } = useThemeUI()
return (
<div>
<Head>
<title>My page title</title>
<meta name="theme-color" content={theme.colors.background} />
</Head>
<p>Hello world!</p>
</div>
)
}

using CSS Custom Properties

You can use custom CSS Properties added by theme-ui to access the colors from a static HTML file.

<meta
name="theme-color"
content="var(--theme-ui-colors-primary)"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="var(--theme-ui-colors-background)"
media="(prefers-color-scheme: dark)"
/>

Take note that @theme-ui/core does not create CSS custom properties. This recipe works only with the theme-ui umbrella package.

Edit the page on GitHub
Previous:
Custom CacheProvider
Next:
Color Mode Toggles