Recipes: Working with Themes
A Gatsby theme abstracts Gatsby configuration (shared functionality, data sourcing, design) into an installable package. This means that the configuration and functionality isn’t directly written into your project, but rather versioned, centrally managed, and installed as a dependency. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another.
Found a theme you’d like to use on your project? Awesome! You can configure it for use by following the steps below.
If you’d like to take a look at more theme options, check out list of themes.
Make sure you have the following installed:
- Create a gatsby site
- Change directory and install theme
In this example, our theme is
gatsby-theme-blog. You can replace that reference with whatever your theme is named.
- Add theme to
Follow the instructions found in the README of the theme you’re using to determine what configuration it requires.
yarn develop, the theme should be avaliable at
To learn how to further customize a theme,check out the avaliabe paths on Gatsby-theme-blog Documentation.
To learn how to further customize a theme, check out the docs on Gatsby theme shadowing.
You can also use multiple themes on a project.
Creating a site based on a starter that configures a theme follows the same process as creating a site based on a starter that doesn’t configure a theme. In this example you can use the starter for creating a new site that uses the official Gatsby blog theme.
- Make sure you have the Gatsby CLI installed
- Generate a new site based on the blog theme starter:
- Run your new site:
- Learn how to use an existing Gatsby theme in the shorter conceptual guide or the more detailed step-by-step tutorial.
Video hosted on egghead.io.
- Generate a new theme workspace using the Gatsby theme workspace starter:
- Run the example site in the workspace:
- Follow a more detailed guide on using the Gatsby theme workspace starter.
- Learn how to build your own theme in the Gatsby Theme Authoring video course on Egghead, or in the video course’s complementary written tutorial companion.
Edit this page on GitHub