How to Implement a Navbar with Light/Dark Mode Toggle Using Redux, Tailwind CSS, and React Router?

In modern web development, creating a responsive navbar with a light/dark mode toggle is an essential feature for enhancing user experience. By leveraging Redux for state management, Tailwind CSS for styling, and React Router for navigation, we can create a dynamic navbar with theme-switching functionality.

Prerequisites

Before we start, ensure you have the following installed:

• Node.js (latest version recommended)
• React (npx create-react-app my-app)
• Redux Toolkit (npm install @reduxjs/toolkit react-redux)
• React Router (npm install react-router-dom)
• Tailwind CSS (npm install tailwindcss postcss autoprefixer && npx tailwindcss init)

Step 1: Setting Up Redux for Theme Management
Create userSlice.js

<code>import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  status: false,
  data: "null",
  theme: "dark" // Default theme
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    themechange: (state) => {
      state.theme = state.theme === "dark" ? "light" : "dark";
    },
  },
});

export const { themechange } = userSlice.actions;
export default userSlice.reducer;</code>

Step 2: Implementing the Navbar with Dark Mode Toggle
Create Navbar.js

<code>import { useEffect } from "react";
import { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { themechange } from "../Utils/userslicer";

export default function Navbar() {
  const dispatch = useDispatch();
  const theme = useSelector((state) => state.user.theme);
  const darkMode = theme === "dark";

  useEffect(() => {
    document.documentElement.classList.remove("dark", "light");
    document.documentElement.classList.add(theme);
  }, [theme]);

  return (
    <nav className="w-full p-4 bg-white dark:bg-black flex justify-between items-center rounded-full shadow-md dark:shadow-lg fixed top-5 left-0 right-0 z-50 mx-auto max-w-7xl px-6">
      <div className="flex items-center gap-2">
        <img src="/logo.png" alt="DevStudio Logo" className="w-8 h-8 dark:invert" />
        <span className="text-black dark:text-white font-semibold text-lg">DevStudio</span>
      </div>
      <div className="flex gap-6">
        <Link to="#" className="text-gray-700 dark:text-gray-300 hover:underline">Services</Link>
        <Link to="#" className="text-gray-700 dark:text-gray-300 hover:underline">Products</Link>
        <Link to="#" className="text-gray-700 dark:text-gray-300 hover:underline">Pricing</Link>
      </div>
      <div className="flex items-center gap-4">
        <button className="bg-black text-white dark:bg-white dark:text-black px-6 py-2 rounded-full font-semibold">Book a call</button>
        <button onClick={() => dispatch(themechange())}>{darkMode ? "☀️" : "🌙"}</button>
      </div>
    </nav>
  );
}</code>

Step 3: Applying Tailwind CSS Dark Mode
Configure tailwind.config.js

<code>module.exports = {
  darkMode: "class", // Enable class-based dark mode
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};</code>

Step 4: Routing with React Router

<code>import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<h1>Home</h1>} />
        <Route path="/services" element={<h1>Services</h1>} />
        <Route path="/products" element={<h1>Products</h1>} />
      </Routes>
    </Router>
  );
}

export default App;</code>

Conclusion

By following this guide, you’ve successfully built a responsive navbar with a light/dark mode toggle using Redux Toolkit, Tailwind CSS, and React Router. This implementation ensures:

• ✅ Efficient state management using Redux
• ✅ SEO-friendly navigation with React Router
• ✅ Smooth theme switching with Tailwind CSS

By implementing these best practices, your website will provide a better user experience and improve search engine rankings (SEO) with fast-loading, accessible, and responsive UI components.