Using Multiple Themes Together
This tutorial covers how to compose multiple themes into a final site using gatsby-theme-blog, gatsby-theme-notes and gatsby-mdx-embed as examples. It will also cover the concept of component shadowing with Theme-UI for styling.
This tutorial assumes the following:
You can view a full working example of this tutorial on GitHub. Some longer code snippets have been edited for length and the full code is available for reference in the example repository.
Using the hello world starter create a new site and navigate to that directory.
- Install the themes:
gatsby-config.jsto add the themes to the plugin array and to update the site metadata:
- Run the site:
localhost:8000to see what is currently there.
Behind the scenes, the two themes created content folders in the root directory of the site. In this step, you will add some content to these folders.
Create a new file in
/content/posts, like this one:
Create a new file in
/content/notes, like this one:
Restart your development server with
gatsby develop. Now if you visit
http://localhost:8000/notes/hello-notes you should see your new content.
Put an avatar image into the
content/assets/ directory, this is used by
gatsby-theme-blog for the bio component. The file name can be
Delete the existing
Change the theme options for the blog theme in
- Restart your development server with
gatsby developto test your new homepage.
Use theme shadowing to customize components the theme provides for you.
The first component to update is
bio-content.js which provides the content used in the
💡 Don’t forget to stop and restart your development server when adding a shadowed component for the first time.
In order to shadow the file you need to place it in the same location it exists within the theme. In this case, that means
src/gatsby-theme-blog/components/bio-content.js. So you’ll create a file structure that looks look like this:
Feel free to make the text of your bio anything you like, but the component will look something like this:
gatsby-theme-notes both use Theme-UI design tokens to manage their styling: colors, font sizes, spacing, etc. You can use component shadowing to gain control over these design tokens in the final site.
As with your bio, you need to match the file structure of the theme. In this case, that’s
src/gatsby-plugin-theme-ui/index.js and the resulting structure will look like this:
Feel free to use whatever colors you like, but here is an example of what you could do.
Note that this example uses
deepmerge. This allows you to use the Theme-UI configuration for any settings you don’t override in this file.
Themes can be big, like
gatsby-theme-blog, but they can also be a small discrete set of components or functions. A great example of this is gatsby-mdx-embed which adds the ability to embed social media content and videos directly into your MDX files.
- Install the theme:
- Update the
gatsby-config.jsfile and add
gatsby-mdx-embedas a plugin:
- Test it out by adding a Youtube video to one of your blog posts:
Use component shadowing to add a navigation menu. You can read more about creating dynamic navigation menus in the docs.
- Add a
- Create the navigation component:
- When that is done the next step is to shadow
gatsby-theme-blog. You can copy and paste code from the original component as a starting point for your new shadowed component.
Your file structure should look like this:
- Import the navigation menu and add it to the header:
💡 This code snippet is edited for length the full component can be viewed on GitHub.
gatsby developand test the new navigation component.
This tutorial has introduced you to the idea of composing multiple themes together in a single Gatsby site. Gatsby Themes are an innovative rethink of the traditional website template and understanding their potential gives you a powerful new set of tools as a developer. To keep diving deeper, check out the Gatsby Theme docs and some of the other resources listed below.
- Using Multiple Themes Example Repo
- Gatsby Themes Reference Guide
- Egghead.io Course: Gatsby Theme Authoring (free)
- IBM and Gatsby Themes: Driving Impact Through Design
- Setting up yarn workspaces for Gatsby theme development
- What is component shadowing?
- Customizing styles in Gatsby Themes with Theme-UI
- Composing and styling Gatsby Themes (with Brent Jackson) — Learn With Jason
- Build a Personal Site Using Gatsby Themes (with Will Johnson) — Learn With Jason