🔰 TailwindCSS dark mode configuration in Gatsby

Intro

Implement dark mode in Gatsby with Tailwind CSS, exploring benefits, user experience impact, and accessibility.

Our goal

If you want to know the all course concepts, technologies and understand what kind of Node and npm versions you need, check the initial lesson - Course overview.

If you already read this article - jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

In previous lesson - 🌟 Adding Tailwind to Gatsby project, we added Tailwind. Now, it's time to add dark theme support.

Our mechanism will be based on external Gatsby plugin - gatsby-plugin-dark-mode. Thanks to this we'll avoid not needed complexity in our code. It will require some setup, but the benefits from this will be huge. In addition, our theme will be "remembered" by the browser, so if the user refresh the page, the previously chosen theme will be applied.

Let's add gatsby-plugin-dark-mode

At the beginning, we need to install as normal dependency mentioned plugin. To achieve it, type in your terminal: npm i --save gatsby-plugin-dark-mode. This plugin will be used on build - when Gatsby will generate pages and on the client, to change the theme.

Now, we need to add our plugin to gatsby-config.ts file.

Using ThemeToggler to switch theme

Now, we need to define some styles that will work only when dark mode is selected. Let's do it inside global.css file.

The ThemeToggler is a component, that implements function as a child pattern to inject internal state to child components. Inside the provided data, there is a property that determines the chosen theme and function to change the theme. You may use it in the following example:

Take a look at different ways to style our HTML via classes. We may use the global way, that you saw in global.css file, or we may do it "inline" with dark prefix.

There is still one missing part to make it work. We need to tell the Tailwind and the plugin, how dark mode class should be attached. We need to provide the following changes in tailwind.config.js file:

Adding missing TypeScript definitions

If you open the IDE inside modified files, you'll see a lot of TypeScript errors. It's because the plugin that we've installed, doesn't contain type definitions. We are lucky that the exposed API of the plugin is really small, so we may add our own type definitions inside our project.

To fix it we need to define types, update tsconfig.json file to tell TypeScript - "Hey! There are additional types for this library". So, let's start with type definitions. Let's add them inside the following file: src/declarations/gatsby-plugin-dark-mode.d.ts. We added an additional "declarations" folder - maybe in the future there will be another package to cover with types.

Definitions are ready, but still TypeScript doesn't have any idea what it is. We need to update tsconfig.json file in following way:

After these changes, your IDE and TypeScript should be calm.

The result

Our dark mode works and looks as in the following GIF:

To get current result jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

Conclusions and next steps

Now our dark mode feature is enabled! Now, you need to add dedicated selectors in your css files or "inline" with dark prefix in class names.

It's good to mention that the implemented solution remembers the chosen state. So, after the page refresh, there is still a theme available.

In the next 🌟 Organized Git commits with Commitlint lesson, we'll add commitlint to our project and we'll protect developers from adding bad-looking commits.