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.
- 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.