Theme colors doesn't apply on production

[Lasha Kvantaliani]

Describe the bug
I have a TypeScript-based next.js application. I migrated theme-ui from an old project where it was working on production and on local as well. While migration I updated theme-ui to the latest. here is my package.json

{
  "name": "oxyn-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "develop": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.9.3",
    "@mdx-js/react": "1.6.22",
    "@sendgrid/mail": "^7.7.0",
    "axios": "^0.27.2",
    "framer-motion": "^6.3.16",
    "next": "12.1.6",
    "next-images": "^1.8.4",
    "polished": "^4.2.2",
    "rc-drawer": "^4.4.3",
    "react": "18.2.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "18.2.0",
    "react-icons": "^4.4.0",
    "react-markdown": "^8.0.3",
    "react-scroll": "^1.8.7",
    "react-stickynode": "^4.0.0",
    "theme-ui": "^0.3.1",
    "typeface-dm-sans": "^1.1.13",
    "validate.js": "^0.13.1"
  },
  "devDependencies": {
    "@types/node": "18.0.0",
    "@types/qs": "^6.9.7",
    "@types/react": "18.0.14",
    "@types/react-custom-scrollbars": "^4.0.10",
    "@types/react-dom": "18.0.5",
    "@types/react-scroll": "^1.8.3",
    "@types/react-stickynode": "^4.0.0",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "typescript": "4.7.4"
  }
}

I have <ThemeProvider theme={theme}> inside of _app.tsx (I tried directly to pages as well)

locally everything is working fine. Even if I'll try to build and then yarn start. but on the production I see default colors instead of defined in theme.ts file.

After inspecting HTML i mentioned:

default colors are overriding define colors, while on my local:

Any idea what I'm missing?

Expected behavior
show colors defined in theme.ts on production as well.

[Piotr Monwid-Olechnowicz]

Hey @lasharela, did you figure out the cause of the problem?