Creating Dark and Light Mode with Tailwind CSS and ReactJS: A Step-by-Step Guide for Beginners 🌗🎨

Introduction:

In modern web development, providing users with the option to switch between dark and light modes has become a popular trend. Tailwind CSS, a utility-first CSS framework, coupled with the power of ReactJS, offers a simple and efficient way to implement this feature. In this step-by-step guide, we will walk through the process of creating a dark and light mode toggle for your ReactJS application using Tailwind CSS. Let's get started on this journey of user-friendly theming! 🚀💡

Prerequisites:

Before diving into the implementation, make sure you have the following prerequisites:

• Basic knowledge of ReactJS and JSX syntax.
• Familiarity with Tailwind CSS and its utility classes.

Step 1: Setting up the React App

If you already have a React app set up, you can skip this step. Otherwise, you can create a new React app using Create React App:

npx create-react-app dark-light-mode-app

cd dark-light-mode-app        

Step 2: Install Tailwind CSS

Install Tailwind CSS and its peer dependencies:

npm install tailwindcss postcss autoprefixer        

Step 3: Create a Tailwind CSS Configuration File

Create a `tailwind.config.js` file in the root directory of your project and paste the following code:

module.exports = {
 purge: [],
 darkMode: 'class', // Enables dark mode based on the class applied to the HTML tag
 theme: {
  extend: {},
 },

 variants: {},
 plugins: [],
}        

Step 4: Add Tailwind CSS Styles

In the `src/index.css` file, import Tailwind CSS:

/* src/index.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';        

Step 5: Implement Dark and Light Mode Switch

Create a new component called `ThemeSwitcher.js` to handle the dark and light mode switch:

// src/components/ThemeSwitcher.js
import React, { useState, useEffect } from 'react';

const ThemeSwitcher = () => {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const isDarkMode = localStorage.getItem('darkMode') === 'true';
    setDarkMode(isDarkMode);
  }, []);

  useEffect(() => {
    document.documentElement.classList.toggle('dark', darkMode);
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

  const toggleDarkMode = () => {
    setDarkMode((prevMode) => !prevMode);
  };

  return (
    <button
      onClick={toggleDarkMode}
      className="px-4 py-2 rounded-md bg-gray-800 text-white"
    >
      {darkMode ? 'Light Mode' : 'Dark Mode'}
    </button>
  );
};

export default ThemeSwitcher;        

Step 6: Integrate ThemeSwitcher Component

In your App.js file, import and use the ThemeSwitcher component:

// src/App.js
import React from 'react';
import ThemeSwitcher from './components/ThemeSwitcher';

function App() {
  return (
    <div className="flex justify-center items-center h-screen">
      <ThemeSwitcher />
    </div>
  );
}

export default App;        

Step 7: Styling the Toggle Button

For a more visually appealing toggle button, add the following CSS classes to your ThemeSwitcher.js component:

// src/components/ThemeSwitcher.js
// ... (previous code)
return (
  <button
    onClick={toggleDarkMode}
    className={`px-4 py-2 rounded-full ${
      darkMode ? 'bg-yellow-400' : 'bg-gray-800'
    } ${
      darkMode ? 'text-gray-900' : 'text-white'
    } transition-colors duration-200`}
  >
    {darkMode ? 'Light Mode' : 'Dark Mode'}
  </button>
);        

Conclusion:

Congratulations! You have successfully implemented a dark and light mode toggle for your ReactJS application using Tailwind CSS. By following this step-by-step guide, you've learned how to set up Tailwind CSS, create a ThemeSwitcher component, and toggle between dark and light modes seamlessly. Keep exploring and customizing your app's styles using Tailwind CSS utility classes. Happy coding! 🎉🌗

Feel free to follow me on Twitter 🐦: [Lokesh Sharma (@Lokeshkavisth) / X (twitter.com)]

Connect on LinkedIn 🔗: [(6) Lokesh Sharma | LinkedIn]

Explore more on Hashnode 🌐: [Lokesh Kavisth (hashnode.dev)]

#ReactJS #TailwindCSS #DarkMode #LightMode #WebDevelopment #Frontend #CSSFrameworks #BeginnersGuide #CodingTips