Skip to content
Theme UI
GitHub

Theme Color Meta Tag

with useThemeUI

Grab your theme from the context with useThemeUI and use your framework's method of adding a meta tag to use your framework’s method of adding a meta tag to <head />

— react-helmet in Gatsby

```jsx
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)"
/>
Edit the page on GitHub
Previous:
Syntax Highlighting
Next:
Color Mode Toggles