Themes and Plugins

Themes in Gatsby

Traditionally, when we create a site with or without starters, all our configuration—site logic, data source, styling, and UI elements—resides within the project code. We may create multiple sites with the same starter. However, while this makes it easy and fast to get a new site running, we still have to write configurations, logic, UI styling, etc., for each site. These codes are usually very similar or may end up being slightly different versions of each other.

This poses a few issues:

• It makes it difficult to reuse shared configurations across multiple sites.

• Sites created with the same starter are difficult to maintain parallelly. If we decide to make UI changes, for instance, we have to make this change for each site.

• Time and energy are spent writing common logic that can easily be plugged in from a common source.

What are themes?

Gatsby themes are collections of configuration options, functionality, and/or user interface (UI) elements bundled into a downloadable and installable package. Themes let us abstract or separate out reusable and shared logic and configurations into packages that can be installed and reused on multiple sites.

Themes are installed as dependencies with npm or yarn. Therefore, when we make changes to the upstream theme, we can easily update different sites using the theme. We do this by simply updating the installed theme version number in the site’s package.json file. This makes it easy to reuse shared configuration across multiple sites and maintain this shared code across the sites by just updating and versioning the code in the installed theme.

Differences between starters and themes