Docs don't tell you to use ThemeProvider early enough.

[0-Captain]

Describe the bug
the color value can't be converted to real color
code:

product:

To Reproduce
Steps to reproduce the behavior:

1. yarn create next-app --ts
2. yarn add theme-ui
3. edit tsconfig.json, add this line
   "jsxImportSource": "theme-ui",
4. create babel.config.js

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-react": {
          importSource: "theme-ui", // or '@theme-ui/core'
          runtime: "automatic",
          throwIfNamespace: false,
        },
      },
    ],
  ],
};

demo:
https://codesandbox.io/s/reverent-wright-q1u54?file=/src/pages/index.tsx:81-88

[hasparus]

Hey @0-Captain, Theme UI doesn't know about your theme yet. You need to pass your theme object to ThemeProvider so the JSX pragma can pick primary from React context.

Take a look at the third paragraph in Getting Started.

https://theme-ui.com/getting-started#getting-started

I made the required change in your CodeSandbox, here it is:

https://codesandbox.io/s/theme-ui-repro-you-gotta-use-provider-bro-hebjd?file=/src/pages/_app.tsx

I'll try to improve the docs so it's more evident.

[hasparus]

Hey @0-Captain, I made a small change to the index page and Getting Started section in the docs. (#1877)

Here's the preview of new index page: https://theme-ui-iuu8kzl45-systemui.vercel.app/#create-your-theme
And the same thing in Getting Started: https://theme-ui-iuu8kzl45-systemui.vercel.app/getting-started

Do you think this would be more welcoming to new Theme UI users?

[0-Captain]

Great, I think it would be better to take the CodeSandbox as an example in the docs