From c2204993778a200c0a6867080685d6696c1086e0 Mon Sep 17 00:00:00 2001
From: hasparus
Date: Mon, 21 Mar 2022 12:26:40 +0100
Subject: [PATCH] docs: describe using custom CSS with meta theme-color
---
.../src/pages/guides/theme-color-meta-tag.mdx | 93 +++++++++++++++----
1 file changed, 74 insertions(+), 19 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
index e40e9d7a1..dbc3ae15b 100644
--- 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,78 @@ title: 'Theme Color Meta Tag'
# Theme Color Meta Tag
-Use your framework’s method of adding a meta tag to
-``—[`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.
-
-```jsx
-// example Head component with react-helmet
-import { Helmet } from 'react-helmet'
-import { useThemeUI } from 'theme-ui'
-
-export default (props) => {
- const { theme } = useThemeUI()
-
- return (
-
-
-
- )
-}
+
+
+Learn more about `` 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 ``
+
+— **[`react-helmet`](https://github.com/nfl/react-helmet) in Gatsby**
+
+ ```jsx
+ import { Helmet } from 'react-helmet'
+ import { useThemeUI } from 'theme-ui'
+
+ function Example() {
+ const { theme } = useThemeUI()
+
+ return (
+