Theme Color Meta Tag

Use your framework’s method of adding a meta tag to <head />—react-helmet in Gatsby and next/head in Next.js, for example.

// example Head component with react-helmet
import { Helmet } from 'react-helmet'
import { useThemeUI } from 'theme-ui'

export default (props) => {
  const { theme } = useThemeUI()

  return (
    <Helmet>
      <meta name="theme-color" content={theme.colors.primary} />
    </Helmet>
  )
}

Edit the page on GitHub

Syntax Highlighting

Color Mode Toggles