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

    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