Build a theme toggle with REACT-TS, TailwindCSS and ContextAPI

Introduction

Writing this solution, is because I scoured the ends of the earth to find something that works, and using knowledge obtained from my research, and a YouTube video I watched, I was able to achieve this effect, and I am making this available for us to draw insight from… may be; Well, we all know the drill, first things first, we prompt our app, using vite. So, here we go!

PS: I’ll be using npm. For yarn or others, you can see the Vite docs

Let us begin

Initalize your application using Vite

Then, we install the proper dependencies as follows, look at the Tailwind docs for more guidance As I am using the bash terminal, I am provided with some kind linux flow, so, I do;

Install tailwindCSS, postCSS and autoprefixer

It would create it. So, your code panel would look like this;

Inital file arrangement

You will see we have our postcss.config.js and tailwind.config.js files ready for us. This is how the initial screen looks like

Initial React + Vite load view

Moving forward, as we are using Vite, we make some specific prompts which enable us to configure Tailwind properly for us to use. You will then add this to your tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then you add this to your index.css, after clearing it of everything;

@tailwind base;
@tailwind components;
@tailwind utilities;

Your index.css should then look like this

index.css modification

This is the icon library I would be using, check it at Iconify. Then, I would install it as a dev dependency

Installation of the Iconify Library

You should also clear all the stuff in your App.css, and add the initial css prompts to remove the default browser stylings. It should look like this

Look after removing the default stylings

That is for the initial CSS stuff.

Initalizing your fonts

It is time to cook our stuff. As a bonus, I would also be adding fonts to the project. The place where I get my fonts is CDNFonts. It is a very prolific place, without the constraints of Google... Well, you know the drill. So, I’ll be using the Varuna font, copy and paste in your index.css, and make these modifications to your tailwind.config.js

@import url('https://fonts.cdnfonts.com/css/varuna');

When you do, you should have;

How to import the font to css

How to sync it with TailwindCSS

Getting Started with the Theme Changer

In your src folder, create a context folder, and create a ThemeContext.tsx file to it.

Folder arrangement for Theme changer

When you do, you should have a starter code like this

Inital code showing what to import from react with types to create

You have created a Theme type to store the types, then the interface to use those types to perform whatever function you would need. Then, create a ThemeContext to store the states in a context

Theme Context code

After that, create an arrow function, which would contain all the parameters you would need to execute the theme change. I will call it ThemeProvider

ThemeProvider function code

In this ThemeProvider, I would use the useState hook to toggle the state based on which theme, then create a function to handle it’s toggle. The code should look like this

Initialising the useState for the code

Merging those code together, we should have;

Final code when you combine them

We then create a function to be able to use the Theme, and set an error boundary, so we would be able to know if there is an issue using it

Theme code with error boundary

When you are done, you would write parameters to export the ThemeProvider and the useTheme. When that is done, you should have your full code like this…

The full code showing the way the function is to be

Now, let us use it to toggle our theme. The colors I used, are generated from coolors.co[link], check it out. We would also initialize the darkMode in tailwind.config.js, and add the class to the index.html. Ensure it is written className, not class. You should have this;

Initializing darkMode in the tailwind.config.js

HTML code showing the dark class

Do not forget to wrap your App in your main.tsx with the ThemeProvider. Now, let us write the code to test the theme, and change it. I would be using the initial boilerplate code with the modifications to change the theme

Initial CSS code showing stylings