[gatsby-theme-cara] Theme-UI Not compatible with Gatsby v4?

[sbarnette]

When I compile the base project, after cloning the template, I see these warnings.
@LekoArts do you know anything about Theme-UI not working in this scenario? I'm having a really hard time trying to change any colors at all on the website. I've shadowed gatsby-plugin-theme-ui correctly but nothing is changing when I change values under style > colors.

File structure:

.
├── @lekoarts
│   └── gatsby-theme-cara
│       ├── components
│       │   └── component files
├── gatsby-plugin-theme-ui
│   └── index.js
└── pages
    └── 404.jsx

I ended up having to hardcode the background in Layout.tsx by specifying it in the html tag (since it gets overridden by the theme-ui defaults anywhere else):

html: {
          fontSize: `18px`,
          WebkitTextSizeAdjust: `100%`,
          backgroundColor: `#FAFAF9`,
        },

I was able to change the background color but can't get any text colors to change. Here's my site: https://www.munchables.io/ (it's a WIP)

[ruiG]

I have the same exact problem with the Jodie theme.

[LekoArts]

The plugin is compatible with Gatsby 4, it's only a matter of correct peerDeps set. I'll want to update to Theme UI 0.14 soonish (https://github.com/LekoArts/gatsby-themes/projects/3#card-75896344) which will mitigate this.

But it all works, it's just a npm warning