How to use multiple themes in Gatsby

What are Gatsby themes?

Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. Gatsby themes are separate sites that are put together to split up large, complex projects.

Multiple themes in Gatsby

Gatsby’s themes are intended to be composable. This means you can install multiple themes alongside each other and use them. For example, gatsby-starter-theme composes two Gatsby themes:

• gatsby-theme-blog
• gatsby-theme-notes.

You can include multiple theme packages in the file gatsby-config.js as part of the plugins. gatsby-starter-theme includes both theme packages: gatsby-theme-bloghttps://www.gatsbyjs.com/plugins/gatsby-theme-blog/ and gatsby-theme-noteshttps://www.gatsbyjs.com/plugins/gatsby-theme-notes/.

Gatsby themes follow a simple sequence of steps:

1. Install the themes

npm install gatsby-theme-blog gatsby-theme-notes

2. Edit the gatsby-config.js file

module.exports = {
  plugins: [
    {
// theme 1
      resolve: `gatsby-theme-notes`,
      options: {
        mdx: true,
        basePath: `/notes`,
      },
    },
// Add both the themes. You can also add more and more themes.
    { 
// theme 2
     resolve: `gatsby-theme-blog` },
  ],
  siteMetadata: {
    title: `Title`,
  },
}

3. Run the file

gatsby develop

Visit localhost:8000 in the URL to view the necessary changes.