Shadowing in Gatsby

When using Gatsby themes, you can use a technique called "shadowing" to override files in the theme.

Some pretty common examples of this include a "Bio" component in a blog starter or perhaps a theme color you'd like to customize.

To implement shadowing, you'll first need to locate the file you need to override. This file will be located in the node-modules folder, which is added when you install Gatsby. The file will generally be located in a subfolder of the node-modules named for the theme you're using.

Once you've located the file, you need to recreate that same file structure within the src folder within your gatsby site. For example, if the file you'd like to override is:

node-modules/themeName/src/style/colors.js

Then you'll need to create the following file structure in your src file:

gatsby-site/src/themeName/style/colors.js

Note that you need not create a second src file (gatsby-site/src/themeName/src/style/colors.js). This level of the file structure can be ignored.

From here, you can now edit your new colors.js file to override and customize the colors defined in the Gatsby theme.

Despite having done a decent amount of work with Gatsby at this point, I had no idea that shadowing existed until I discovered I needed it for the project I was working on, and even then I had no clue where to look. Thanks so much to Ferran Buireu for answering my StackOverflow question! Hopefully this post will help other people running into the same problem I had.

For more information, please see the description of shadowing in the Gatsby docs.

Thanks for reading! I hope you find this and other articles here at ilyanaDev helpful! Be sure to follow me on Twitter @ilyanaDev.