Category: Uncategorized

Though themes differ from plugins and starters in many significant ways, they are useful for a variety of use cases, particularly to allow for packaged portions of functionality repeated across multiple sites to be managed gracefully as a single dependency. Though many Gatsby users will use Gatsby themes to override aesthetic elements to their heart’s…

Theme shadowing doesn’t just allow you to override entire files, like we’ve seen up to this point. After all, one of the issues with the CSS override example from the previous section is that you may not want such a small stylesheet to override every single line of CSS in the upstream file. Instead of overriding…

The gatsby-theme-blog theme incidentally installs the gatsby-plugin-theme-ui plugin, which provides a variety of CSS styles to the theme. This plugin includes a preset, gatsby-theme-ui-preset, which is used by the gatsby-theme-blog theme. To shadow a file from a plugin that a theme depends on, we can use much the same approach as before. Within the src directory, the directory gatsby-plugin-theme-ui contains shadowed files that will override the installed gatsby-plugin-theme-ui dependency’s…

To begin, let’s create a new site based on the Gatsby blog theme starter, which will automatically set up what we need: Once you’ve installed the starter, change directories into the scaffolded site. You’ll encounter an internal directory structure that looks like the following: As you can see, in our src directory, we have a gatsby-theme-blog directory containing just a few…

As I’ve alluded to a few times in this section, Gatsby themes are particularly compelling not just as extensions of existing Gatsby functionality, but also for their flexibility. As we’ve seen, theme composition permits multiple Gatsby themes to be arbitrarily installed into a single Gatsby site. Theme shadowing, meanwhile, allows end users of Gatsby themes to replace any file…

Earlier, we explored how to build themes from scratch using the Gatsby theme workspace starter. But this isn’t the only way to create a new theme; Gatsby developers can also convert starters into working Gatsby themes. In fact, the Gatsby documentation pinpoints this conversion path from starters to themes as one of the major motivations for…

Releasing themes works precisely the same way as releasing a plugin (see Section 9), so I won’t repeat the instructions to publish to the Gatsby Plugin Library and the NPM package registry in this section. Because themes, like plugins, are typically intended for use by other Gatsby developers rather than strictly for private use, the same best practices…

Data queries and response data are typical places where theme users may wish to override the default data in place. For instance, consider one of the most common queries issued by Gatsby: a query to fetch site metadata such as the site title and description. A theme can provide a default query that pulls from metadata…

Up until now, most of the example Gatsby pages that we’ve seen have co-located data queries and data rendering in the same file to make it easier to connect the dots between a data query and the renderer that handles the response data. Many developers prefer to formalize a separation of concerns that distinguishes between components of code…

Without exception, the name of every Gatsby theme must begin with the prefix gatsby-theme-. This is to ensure that Gatsby can effectively identify theme packages when it performs build-time compilation. As we saw from the example of gatsby-theme-blog, some themes are responsible for scaffolding directories to give guidance to theme users and to house certain important information. It’s…