Gatsby: The Definitive Guide

Chapter 10. Gatsby Themes

In the previous chapter, we looked at two ways to extend Gatsby functionality with plugins and starters. But these aren’t the only means to extend Gatsby sites. Themes are a subset of Gatsby plugins that provide additional functionality through a distinct Gatsby configuration file. Because themes can encompass not only aesthetic differences but also additions to features like data sourcing and interface code, the name is a bit of a misnomer. One useful way to think of a Gatsby theme is as a Gatsby site that has its own configuration and can be installed into another Gatsby site.

In this chapter, we’ll first look at themes in the context of the larger Gatsby ecosystem by comparing them to other ecosystem elements like plugins and starters. Then, we’ll cover how to use a Gatsby theme in an existing site before directing our attention to how to create Gatsby themes from scratch. Finally, we’ll end this chapter with an examination of two concepts that make themes in Gatsby unique: shadowing and composition.

Gatsby Themes in Context

A theme in Gatsby is a special kind of plugin that contains its own gatsby-config.js and is responsible for providing prebuilt functionality, data sourced from external sources, and UI code. To create a Gatsby theme, all of the baseline default configuration (shared functionality, data sourcing, design elements, etc.) is abstracted out of a Gatsby site and converted into an installable package.

Since they behave just like other ...