Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

gatsby

How to use multiple themes in Gatsby

Sarvech Qadir

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-blog and 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.

RELATED TAGS

gatsby

CONTRIBUTOR

Sarvech Qadir
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring