Skip to content

Configuring Themes

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 menuLinks and socialLinks which 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 displaySiteLogo which controls whether the logo is displayed or not. An example of passing data is sanityDatasetId which passes data from the theme through to gatsby-source-sanity to 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.

© 2021 Gatsby Theme Catalyst