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.
  • 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 entire aspects of these themes in your starter.

© 2021 Gatsby Theme Catalyst