Build a theme toggle with REACT-TS, TailwindCSS and ContextAPI
Tags: tailwindcss, react, typescript, contextapi
Published: 2023-11-30 13:05:16

## 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](https://youtu.be/VylXkPy-MIc?si=UHlme4Q8wu75bdTQ) 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](https://vitejs.dev/guide/)_

## _Let us begin_

![Initalize your application using Vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u06svgxjge2trk96kzh1.png)

Then, we install the proper dependencies as follows, look at the [Tailwind docs](https://tailwindcss.com/docs/guides/vite) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1zibjo7a30eggd2qxmf.png)

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

![Inital file arrangement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icfuyj3kemq3kabb1c1f.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nd2920a24aivcsi8qo3m.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt48fxro6masz5zi4chy.png)

This is the icon library I would be using, check it at [Iconify](https://icon-sets.iconify.design/). Then, I would install it as a dev dependency

![Installation of the Iconify Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu8kby5cygh7dso09uok.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lojqxt6gu0cb1ctna0bc.png)

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](https://www.cdnfonts.com/). It is a very prolific place, without the constraints of Google... Well, you know the drill.
So, I’ll be using the [Varuna](https://www.cdnfonts.com/varuna.font) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsjz7sx2j8kog74efvb5.png)

![How to sync it with TailwindCSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r2pxfcgmw4z1n2ypi2z.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxh2ht8omwua18fld42w.png)
When you do, you should have a starter code like this


![Inital code showing what to import from react with types to create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmmvbbx2o4ktnt34fuwg.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p0vazl2o5ws69y6av4w.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6olmac1eh4n7poo5av6k.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq43uy8yox2adfb01u1p.png)

Merging those code together, we should have;


![Final code when you combine them](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob5hg6a00zcfz1pxm3h3.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne06b2ng1dbipbtzghgz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tolv6qt3mc1yu4q1v0l.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr2op8fxd7sqwmpmxq5t.png)


![HTML code showing the dark class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puu7yzfn8h8swsdpolcn.png)


***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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f52nw7d68yk0qaz73668.png)

With the stylings and all, you should have this;

![Light theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o44alu70wdh6n3zg440.png)


![Dark theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20eo2evcjr9ieh9ju3x7.png)

## Special:
To make the theme persist reload, you have to save it to local storage. So, your code would be modified as such;


![Adding localStorage to code so it persists reload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89rskf53mfgzx46xjf9o.png)

And that’s all folks. Hope you worked with this, and it potentially solved your problem.

Catch you next time. Thank you!
You can reach by mail here [Chibuzo Odigbo](mailto:cfaodigbo@gmail.com), [Twitter](https://twitter.com/OdigboF), [LinkedIn](https://www.linkedin.com/in/franklin-odigbo-706886202/), [Github](https://github.com/Franklivania), [My Website](https://chibuzo-franklin-portfolio.vercel.app/)

Cheers🍻