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