[gatsby-plugin-chakra-ui]: Not overwriting theme

[secretlifeof]

I am trying to use gatsby-plugin-chakra-ui with a custom theme.

If I understand the documentation correctly putting theme.js inside the folder "src/gatsby-plugin-chakra-ui/theme.js" should overwrite the theme. Putting a new theme.js inside this folder does not do anything. Have also tried putting it inside "src" and inside the project directory.

What I understand from the GitHub source code theme.js looks like this:

import { theme } from "@chakra-ui/core";
export default theme;

Is this the reason it always imports the default theme?

Tagging @alexluong

"@chakra-ui/core": "^0.5.2"
"@emotion/core": "^10.0.27",
"@emotion/styled": "^10.0.27",
"emotion-theming": "^10.0.27",
"gatsby": "^2.18.12",
"gatsby-plugin-chakra-ui": "^0.1.2",

[trevorblades]

I'm noticing the same thing. My attempt at shadowing the theme.js file seems to have no effect. Here's a codesandbox with the repro: https://codesandbox.io/s/vigorous-wilbur-x1yjb

[trevorblades]

The reason this is happening is because when the build script runs, it moves everything from src to the root of the package, including theme.js. In order for theme.js to be shadowable, it must live in the package's src directory. As the Gatsby docs put it:

Gatsby themes introduce a concept called “shadowing”. This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation.

In fact, we could avoid this problem entirely by not transpiling any of the files in src, and instead just publishing the gatsby-*.js and src/theme.js files as they are, after moving the Gatsby files back into the package root. You can see this being done by gatsby-theme-material-ui's own implementation of wrapRootElement which is then imported and exported by the theme's gatsby-*.js files.

Edit: I've opened a PR that makes the change proposed in this comment! Hopefully that looks ok and we can get back to our theme shadowing ways 😄