Theme-ui: Gatsby Plugin Theme UI Not Working

[moshemo]

I have a fresh install of Gatsby with a fresh install of Theme UI and Gatsby Plugin Theme UI. I have updated the gatsby-config file appropriately and created a gatsby-plugin-theme-ui folder with an index.js file under the src directory.

Inside that index.js I have created a very simple theme object:

export default {
  colors: {
    text: "#111",
    background: "#fff",
  },
}

I now want to access the text color in a sx prop like so:

function Aside({ children }) {
  return (
    <aside
      sx={{
        bg: "text",
      }}
    >
      {children}
    </aside>
  )
}

The problem is, this does NOT work. If I change the value to a hex value it does work.

There is another way for me to get this to work -- as follows:

1) import ThemeProvider in my layout.js file: import { jsx, ThemeProvider } from "theme-ui"
2) import the theme object from index.js: import theme from "../../gatsby-plugin-theme-ui"

Now bg: "text" works.

So, I now have two questions.

1) How do I get the plugin to work?
2) Why do I need this plugin if I can access my theme values without it?

[CanRau]

I guess you've got

/** @jsx jsx */
import { jsx } from 'theme-ui'

at the top of your Aside component's file?

Not sure what you mean by

Why do I need this plugin if I can access my theme values without it?

Do you have a link to that repo you can share?

[moshemo]

I got it to work - so no need to upload it.

But in terms of my second question, here is what I am wondering. I am NOT creating a Gatsby Theme. I'm just creating a site and want to use theme-ui. Now I can create a theme file and import it using the ThemeProvider without having to use gatsby-plugin-theme-ui.

As such, I am wondering if I need in this case that plugin. I can easily use theme-ui without it. So why would I want to use it?

[jxnblk]

The plugin also helps prevent a flash of unstyled content when using color modes, adds global styles for color and typography, and potentially more in the future. That said, you don’t have to use the plugin and can render the ThemeProvider manually if you prefer