Shadowing Gatsby theme

16.03.2022 — Front-end, GatsbyJS — 1 min read

I used minimal-blog provided by LekoArts when I built this site with GatsbyJS. I love this theme, simple & stylish, and everything I needed is prepared. But I also wanted to modify a little.

This article introduces how to modify Gatsby theme, and what "Shadowing" is.

What is shadowing

There is a function to modify componetns and files in Gatsby. Simply it's called "Shadowing" when you want to customize Gatsby themes.

You basically don't modify original files directly, but make new files to override the original files.

Here is more information about shadowing. Shadowing in Gatsby Theme

Shadowing a footer file

Maybe it's nice to have a specific example. So let's shadow a footer file this time, and change footer contents.

Finding the file you want to modify

First you find a file you want to modify from original theme directory.

1node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/footer.tsx

Create directory

Next you create src folder in your site directory, and also create @lekoarts/gatsby-theme-minimal-blog folders in src folder.

1yoursite/src/@lekoarts/gatsby-theme-minimal-blog

Copy the file

If you put components or files into yoursite/src/@lekoarts/gatsby-theme-minimal-blog which are same names as original one, you can customize the Gatsby theme.

This time, you modify footer.tsx in components folder, so you need to create components first.

1yoursite/src/@lekoarts/gatsby-theme-minimal-blog/components

Then you can copy footer.tsx file from node_modules/@lekoarts/gatsby-theme-minimal-blog/src/components/footer.tsx, and put into components folder you created now.

1yoursite/src/@lekoarts/gatsby-theme-minimal-blog/components/footer.tsx

This is the contents in footer.tsx

1/** @jsx jsx */
2import { jsx, Link } from "theme-ui"
3import useSiteMetadata from "../hooks/use-site-metadata"
4
5const Footer = () => {
6  const { siteTitle } = useSiteMetadata()
7
8  return (
9    <footer
10      sx={{
11        boxSizing: `border-box`,
12        display: `flex`,
13        justifyContent: `space-between`,
14        mt: [6],
15        color: `secondary`,
16        a: {
17          variant: `links.secondary`,
18        },
19        flexDirection: [`column`, `column`, `row`],
20        variant: `dividers.top`,
21      }}
22    >
23      <div>
24        &copy; {new Date().getFullYear()} by {siteTitle}. All rights reserved.
25      </div>
26      <div>
27        <Link
28          aria-label="Link to the theme's GitHub repository"
29          href="https://github.com/LekoArts/gatsby-themes/tree/main/themes/gatsby-theme-minimal-blog"
30        >
31          Theme
32        </Link>
33        {` `}
34        by
35        {` `}
36        <Link
37          aria-label="Link to the theme author's website"
38          href="https://www.lekoarts.de?utm_source=minimal-blog&utm_medium=Theme"
39        >
40          LekoArts
41        </Link>
42      </div>
43    </footer>
44  )
45}
46
47export default Footer

Modify contents

Now you're ready to modify contents !

Here is the code.

1/** @jsx jsx */
2import { jsx } from "theme-ui"
3import useSiteMetadata from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-site-metadata"
4
5const Footer = () => {
6  const { siteTitle } = useSiteMetadata()
7
8  return (
9    <footer
10      sx={{
11        boxSizing: `border-box`,
12        display: `flex`,
13        justifyContent: `space-between`,
14        mt: [6],
15        color: `secondary`,
16        a: {
17          variant: `links.secondary`,
18        },
19        flexDirection: [`column`, `column`, `row`],
20        variant: `dividers.top`,
21      }}
22    >
23      <div>
24        &copy; {new Date().getFullYear()} by {siteTitle}.
25      </div>
26      <div>
27        Built with GatsbyJS
28      </div>
29    </footer>
30  )
31}
32
33export default Footer

Before:

After:

Of course, you can make any changes wherever you want, and you can even use JS file if you don't write TypeScript :)

Conclusion

I still learn a lot about GatsbyJS, but I'm happy if this article helps. Gatsby theme is dynamic and poweful. I would try to customize more themes or make original themes :)