Beginner Friendly

A deep dive into making Dark Mode work with Gatsby and Emotion, without annoying flashes.

Gatsby JS and Emotion CSS

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.


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.

Ed Pike

Dad, Software Engineer, Tech Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store