🌈How to Create a Theme with ReactJS and Tailwind CSS

Hey guys, welcome back to our weekly project This week, we're going to look at how to create your own theme using only Tailwind CSS and ReactJS.

The full project code is on GitHub.

It's pretty simple, there are five steps you need to follow.
~ Define Colors in Tailwind Config
~ Set Themes in CSS
~ Create Context
~ Create Theme Switch Buttons
~ Update Components to Use Custom Classes

Step 1: Define Colors in Tailwind Config

Define custom colors in your tailwind.config.js file. This allows you to use CSS variables for dynamic theming.

//tailwin.config.js

extend: {
  colors: {
    bgColor: 'var(--bgColor)',
    gtColor1: 'var(--gtColor1)',
    gtColor2: 'var(--gtColor2)',
    textColor: 'var(--textColor)',
    textColor2: 'var(--textColor2)'
  }
}

Step 2: Set Themes in CSS

Define your theme variables in index.css for each theme.

//index.css

.light {
  --bgColor: hsl(105.6, 100%, 95.1%);
  --gtColor1: hsl(93.2, 94.5%, 78.63%);
  --gtColor2: hsl(59.56, 91.89%, 70.98%);
}
.dark {
  --bgColor: rgb(2, 6, 23);
  --gtColor1: hsl(210, 32.39%, 27.84%);
  --gtColor2: hsl(195, 19.05%, 58.82%);
  --textColor: hsl(0, 0%, 96.08%);
  --textColor2: hsl(0, 83.87%, 63.53%);
}
.blue {
  --bgColor: hsl(195, 53%, 79%);
  --gtColor1: hsl(93.2, 94.5%, 78.63%);
  --gtColor2: hsl(59.56, 91.89%, 70.98%);
}
.green {
  --bgColor: hsl(150, 80%, 15%);
  --gtColor1: hsl(181.65, 100%, 35.69%);

  --gtColor2: hsl(153.81, 100%, 38.63%);
  --textColor: hsl(138.46, 79.59%, 90.39%);
  --textColor2:hsl(189.15, 100%, 46.27%);
}
.brown {
  --bgColor: hsl(39, 70%, 50%);
  --gtColor1: hsl(162.9, 100%, 37.84%);
  --gtColor2: hsl(158.54, 100%, 26.86%);

}
.pink {
  --bgColor: hsl(350, 100%, 88%);
  --gtColor1:hsl(96.92, 73.58%, 89.61%);
  --gtColor2: hsl(105.6, 100%, 95.1%);
}

Step 3: Create Context

Set up a context to manage the theme state across your application.

// context/themeContext.jsx

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [themeMode, setThemeMode] = useState('light');

  const switchTheme = (theme) => {
    setThemeMode(theme);
    document.documentElement.className = theme;
  };

  return (
    <ThemeContext.Provider value={{ themeMode, switchTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

The context helps manage and provide the theme state (themeMode) and the function to switch themes (switchTheme) to any component that needs it.

Step 4: Create Theme Switch Buttons

Create buttons to switch themes using the switchTheme function from the context.

import { useTheme } from './path/to/context';

function ThemeBtn() {
  const { switchTheme } = useTheme();

  return (
    <div className="flex gap-x-6 items-center justify-center mt-10">
      <button style={{ backgroundColor: 'var(--bgColor)' }} onClick={() => switchTheme('light')}>Light</button>
      <button style={{ backgroundColor: 'var(--bgColor)' }} onClick={() => switchTheme('dark')}>Dark</button>
      <button style={{ backgroundColor: 'var(--bgColor)' }} onClick={() => switchTheme('blue')} className="blue text-md rounded-md border border-solid border-[hsl(0,0%,87%)] w-8 h-8 cursor-pointer">Blue</button>
    </div>
  );
}

Each button calls switchTheme with the respective theme, updating the theme on click.

Step 5: Update Components to Use Custom Classes

Update your components to use the custom classes defined in Tailwind. This ensures that when the theme changes, the component styles update accordingly.

 <h1 className=" text-textColor ">
Theme Switching Made Easy: A ReactJS and Tailwind CSS Guide
 </h1>

Ahh... by the way dont forget to wrap your main content with theme context like this

// app.jsx
 <ThemeProvider>
   <div className='bg-bgColor'>
      <Header />
      <HeroBanner />
    </div>
</ThemeProvider>

By following these steps, you can implement dynamic theming in your React application using Tailwind CSS. The context setup allows for easy management and application of different themes across your app.