Blog

Gatsby Functional Themes and why do we need them

April 14, 2020

Gatsby Functional Themes and why do we need them

What is Gatsby Themes?

Theme - absctracted layer of site functionality in a npm package(and yes, this is why starters are not themes). It may include: design, data sourcing and functionality. For instance, design themes you can find on this site, they also called “templates”. And they may include data sourcing functionality, like built-in headless CMS support, for example.

How themes different from starters?

For contrary, starters are pre-defined sites. Starters may include all of above features, and they can even have design, but they serving different purpose - to quickly start a project. Main disadvantage of this approach is inflexibility. Many starters bloated with functionality you didn’t want, or vice verca, they lack of it. You can find a lot of abandoned starters that are just forks of official and mainstream ones, but with added simple feature or support of some new fancy headless cms.

To resolve this problem GatsbyJS developers created themes concept. Using them gives you ability to add only what you need, no more, no less. Basicly, themes is a type of a plugin.

Wait, plugin? So what the difference between plugin and theme?

Extended customization, in particular - component shadowing.

For more information about difference between starters, plugins and themes, you can visit official docs

And in this article we will show you some examples of functional themes.

Functional Themes

So functional themes do the only one thing - bringing functionality to your site. Now let’s check them out!

1. Gatsby Theme Waves

This is in fact the most fascinating example of functional themes, since it changing not only the way we write guides or tell stories, but also how end users interact with them. Just take a look at code guide example:

gatsby waves demo

For more, see live demo and documentation

This theme is experimental, but worth a try.

2. Gatsby Theme Firebase

Firebase theme implements one simple, but yet one of the most trickest part of all sites - authentification

gatsby-theme-firebase

With this theme, you can setup authentification on your site literally in minutes. For installation guide, look here

3. Gatsby Theme Apollo

Don’t confuse this with gatsby-theme-apollo-docs

Example of using:

// src/gatsby-theme-apollo/client.js
import fetch from 'isomorphic-fetch';
import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://api.spacex.land/graphql/',
    fetch
  })
});

export default client;

It adds Apollo GraphQL client to your site, which you will need for creating hybrid gatsby sites(making requests from your static site to some backend). You can check official installation guide

4. Gatsby Theme Slideshow

gatsby-theme-slideshow

This theme implements, literally, the slideshow. Check this demo Perfect for converting some part or even whole site to slideshow, with slides created using mdx. Sadly, it now has only one transition effect - sliding, but this may change in the future(and you can do this, too!). To see full description and installation instructions, click here

Final thoughts

Gatsby made wonderful work by creating themes concept, and it has a lot of potential. All these themes it’s just a beginning of really powerful ecosystem.


Want some more awesome themes?