Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: expand docs on meta theme-color #2134

Merged
merged 4 commits into from Mar 29, 2022
Merged

docs: expand docs on meta theme-color #2134

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4dd8ca8
docs: stop advising people to use primary as theme-color
hasparus Feb 15, 2022
33e16b9
docs: describe using custom CSS with meta theme-color
hasparus Mar 21, 2022
2f934df
Update packages/docs/src/pages/guides/theme-color-meta-tag.mdx
hasparus Mar 29, 2022
c69043b
Update packages/docs/src/pages/guides/theme-color-meta-tag.mdx
hasparus Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
58 changes: 55 additions & 3 deletions packages/docs/src/pages/guides/theme-color-meta-tag.mdx
View file
Open in desktop
Expand Up @@ -4,14 +4,23 @@ 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`, 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`](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 (
Expand All @@ -21,3 +30,46 @@ export default (props) => {
)
}
```

#### **[`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._