Most of the theme configuration is handled in one of three ways; via
gatsby-config.js, via Theme-UI, and via component shadowing. This gives you the flexibility to completely customize the final appearance and visual design of your site.
- Gatsby-Config.js: This is where your siteMetadata is located along with arrays like
socialLinkswhich provide information to the themes.
- Theme Options: These act as feature flags or ways to communicate information into the themes. An example of a feature flag is
displaySiteLogowhich controls whether the logo is displayed or not. An example of passing data is
sanityDatasetIdwhich passes data from the theme through to
gatsby-source-sanityto properly source your data.
- Branding: Branding including logos is easily modified.
- Theme-UI: Theme UI provides a theme specification file which controls colors, fonts, spacing, design, etc. Variants allow for extendable CSS right in the theme file.
- Component Shadowing: Component shadowing allows you to completely rewrite or redesign an aspect of these themes in your starter. This is a very powerful development tool that is well documented in the main Gatsby docs.