title |
---|
Theme Color Meta Tag |
Learn more about <meta />
theme color on
MDN
and CSS Tricks.
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>
)
}
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.