docs: describe using custom CSS with meta theme-color

system-ui · Mar 21, 2022 · 33e16b9 · 33e16b9
1 parent 4dd8ca8
commit 33e16b9
Showing 1 changed file with 56 additions and 7 deletions.
diff --git a/packages/docs/src/pages/guides/theme-color-meta-tag.mdx b/packages/docs/src/pages/guides/theme-color-meta-tag.mdx
@@ -4,23 +4,72 @@ title: 'Theme Color Meta Tag'
 
 # Theme Color Meta Tag
 
-Use your framework’s method of adding a meta tag to
-`<head />`—[`react-helmet`](https://github.com/nfl/react-helmet) in Gatsby and
-[`next/head`](https://nextjs.org/docs/api-reference/next/head) in Next.js, for
-example.
+_Learn more about `<meta/>` theme color on
+[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color)
+and [CSS Tricks](https://css-tricks.com/meta-theme-color-and-trickery/)._
+
+### 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`](https://github.com/nfl/react-helmet) in Gatsby**
 
 ```jsx
-// example Head component with react-helmet
 import { Helmet } from 'react-helmet'
 import { useThemeUI } from 'theme-ui'
 
-export default (props) => {
+function Example() {
   const { theme } = useThemeUI()
 
   return (
     <Helmet>
-      <meta name="theme-color" content={theme.colors.background} />
+      <meta name="theme-color" content={theme.colors.primary} />
     </Helmet>
   )
 }
 ```
+
+#### **[`next/head`](https://nextjs.org/docs/api-reference/next/head) in Next.js**
+
+```tsx
+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.
+
+```html
+<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._