Cannot override styling (coloration and svg image) on docs site created from gatsby-starter-rocket-docs

Question

I am working on a docs site created from the gatsby starter gatsby-starter-rocket-docs. I want to have a different image from the default as the header to the sidebar. Currently, the image comes from an svg defined in the node modules, rather than in the code itself for the repository. The node modules aren't persisted, so the changes can't be made there. I need to override the styling defined in the node modules (which are installed in the folder via npm install gatsby), but I need to do it from the code that is persisted.

Here is the image I'm trying to replace:

This issue is defined in greater detail here, and here is the repository containing all the code. The issue also mentions changing the colors of highlighted links in the sidebar, and this should have a similar fix because the highlight color for that is also defined in the node modules. However, the image is the more important issue.

Answer 1

When you deal with Gatsby Themes you need to make an extra effort to override the default configuration settings in the core of the theme, as you said. Gatsby allows you to make it using a concept known as "shadowing". Basically is a custom configuration (from logos to CSS, etc) that overrides the default one. From their documentation:

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. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.

A practical use case is when you’ve installed gatsby-theme-blog and want to customize the author Bio component to add your own biographical content. Shadowing lets you replace the theme’s original file, gatsby-theme-blog/src/components/bio.js, with your own file to make any changes you need.

You need to recreate the theme structure (inspect it in the node_modules) with your own components, assets and styles. For example, given that structure:

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
└── src
    ├── components
    │   ├── bio-content.js
    │   ├── bio.js
    │   ├── header.js
    │   ├── home-footer.js
    │   ├── layout.js
    │   ├── post-date.js
    │   ├── post-footer.js
    │   ├── post-hero.js
    │   ├── post-link.js
    │   ├── post-list.js
    │   ├── post-title.js
    │   ├── post.js
    │   ├── posts.js
    │   └── seo.js
    ├── gatsby-plugin-theme-ui
    │   └── components.js
    └── gatsby-theme-blog-core
       └── components
          ├── post.js
          └── posts.js

To add a custom bio-content.js component you'll need to add a file called bio-content.js under /src/gatsby-theme-blog/components/bio.js, and so on for the rest of the custom components.