Beginner Friendly
A deep dive into making Dark Mode work with Gatsby and Emotion, without annoying flashes.
We’ll be using Chrome, Windows 10, Gatsby 2, gatsby-plugin-emotion, gatsby-use-dark-mode plugin, @emotion/react, @emotion/styled and use-dark-mode React Hook. Let’s get cracking!
Step 1. Install Gatsby Default Starter
I recommend creating a very basic Gatsby project. We are dealing with CSS. If you try adding all of this to an existing site with CSS and styling, you are asking for trouble. Once you get it working with a basic site, you will be better able to add it to an existing site.
Create a Gatsby default starter project. Run gatsby develop to make sure it runs. You should see:
Beginner Friendly But With TLDRs!
The gatsby-source-contentful plugin changed a lot in late 2020, from version 2 to version 4. One significant breaking change concerned Rich Text fields, especially if you have linked/embedded Contentful content and assets in your RichText Field. Fixing this breaking change can be tricky, especially if you are fairly new to GraphQL and Gatsby.
Overview
TLDR: The plugin changed from 2.x to 4.x in four months. Rich Text changed from having one “json” field to a combination of a “raw” string field and “references” array.
If you use Contentful headless CMS with Gatsby, you need the gatsby-source-contentful plugin to gain access to your content. Rendering most of the data types to HTML is straight forward. The Rich Text field is a major exception. Most examples, tutorials, and Gatsby starters refer to an older, simpler version of the plugin.
The gatsby-source-contentful package was stable for nearly 3 years at version 2.x. However, people building large Gatsby…
Ed Pike
Dad, Software Engineer, Tech Educator
