Use File Shadowing to Override Themes

Gatsby Themes make it quick to share a consistent look and feel across your site, but what happens if we want to customize the theme?

To handle customization without needing to fully eject from the theme, Gatsby supports a concept called "shadowing" that allows us to selectively override any file in a theme from within your site.

Let's customize our site colors by shadowing the CSS variables file.

In your site, create a new file at site/src/gatsby-theme-shared-nav/styles/variables.css and add the following:

:root {
  --black: darkblue;
  --white: #fff;
  --text: #333;

Note: you have to shadow the entire file. Standard practice is to copy paste the file and make selective edits.

Restart the development server and you'll see the new color applied!