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.
<metaname="theme-color"content="var(--theme-ui-colors-primary)"media="(prefers-color-scheme: light)"/><metaname="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.