Colors in SX prop styles not populating correctly

I’ve wrapped my application in the theme provider and am using the jsx pragma in my components. Despite this, I am unable to utilize colors within my theme configuration.

Main App:

import { ThemeProvider } from 'theme-ui'
import theme from '../src/theme'
import dynamic from 'next/dynamic'
import Header from '../components/layout/Header'

const Footer = dynamic(() => import('../components/layout/Footer'), { ssr: false })

function ConciseStudio({ Component, pageProps }) {
  return(
    <ThemeProvider theme={theme}>
      <Header/>
      <Component {...pageProps} variant={theme.styles}/>
      <Footer/>
    </ThemeProvider>
  )
}

export default ConciseStudio

My theme colors:

colors: {
    text: '#181818',
    background: '#fff',
    primary: '#181818',
    secondary: '#CC008A',
    tertiary: '#4d4d4d',
    muted: '#f2f2f2'
  },

Example component:

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

export default function Header() {

  const headerStyles = {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '80px',
    background: 'primary'
  }

  return(
    <div sx={headerStyles}>
      <p>stuff</p>
    </div>
  )
}

In my browser, I see this:

Am I doing something incorrectly here, or is this a bug? I’m using the latest version of NextJS.

[hasparus]

backgroundColor: ‘primary’ works fine.

Oh yeah, that’s a thing that could help you, @joniler. Try backgroundColor or bg.

I checked my repro right now, and it works properly.

Obviously, I didn’t take a screenshot, but I could swear it didn’t work when I posted my last comment 😕 colors were missing from the context 😢

[joniler]

@atanasster right you are my friend. Thanks again for the help!