Theme-ui: [Question] Migration from 0.2 > 0.3: body color: text and background-color: background

[kossowski]

I update from version 0.2 to 0.3 and the body has a default color: text and background-color: background, that it didn't have before.

The problem is that I set theme.colors.background and theme.colors.text colors but it doesn't change the body. The background stay on the default blue #6363cf and the color: text just shows Invalid property value.

Is there a new way to define this colors?

My setup:

"dependencies": {
  "gatsby": "^2.19.18",
  "gatsby-plugin-theme-ui": "^0.3.0",
  "theme-ui": "^0.3.1",
...
}

theme.js

export default {
  colors: {
    text: "#404b5b",
    background: "#00283C",
  }
}

[CanRau]

Can you link to a repository?

[jxnblk]

You might want to ensure that you only have one copy of Emotion installed using yarn list --pattern emotion -- this sometimes causes a bug where the correct React context instance isn't being picked up

[kossowski]

@CanRau @jxnblk Thanks for your help!

I was just about to create a repository for this problem, when I noticed that the theme in the gatsby-plugin-theme-ui was named theme.js. After renaming it to index.js everything works as before!

I don't know why it works with the name theme.js before or why I named it like this, but obviously it no longer works in v0.3 🤷‍♂️

[CanRau]

Anyway glad you solved it 🥳👍