Added the Dark/light mode functionality

src/App.jsx

@@ -4,7 +4,7 @@ import { startDrawing, clearCanvas, handleUpdates } from "./utils/canvas";
 import Menu from "./components/Menu";
 import BgColor from "./components/BgColor";
 import { rainbowColors } from "./utils/helpers";
-import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
+import { FaRegEye, FaRegEyeSlash, FaMoon, FaSun } from "react-icons/fa";
 
 import Joyride from "react-joyride";
 
@@ -39,6 +39,7 @@ const tourSteps = [
     disableBeacon: true,
   },
 ];
+
 import { SiBuymeacoffee } from "react-icons/si";
 
 function App() {
@@ -47,6 +48,7 @@ function App() {
   const [thickness, setThickness] = useState(10);
   const [color, setColor] = useState("#000");
   const [bgColor, setBgColor] = useState("#B7BABF");
+  const [darkMode, setDarkMode] = useState(null);
   const [showMenuAndBgColor, setShowMenuAndBgColor] = useState(true);
   const [steps] = useState(tourSteps);
 
@@ -68,16 +70,26 @@ function App() {
     }
   }, [thickness]);
 
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    document.body.classList.toggle('dark')
+  };
+
+
   return (
     <>
+
+      <div className="bg-[#CBCCCF] flex flex-col min-w-full justify-center gsm:flex-row dark:bg-black dark:text-white ">
+
+
       <Joyride steps={steps} continuous showSkipButton={true} />
 
-      <div className="bg-[#d3d5d8] flex flex-col min-w-full justify-center gsm:flex-row">
          {/* Buy me a coffee element */}
-         <a href={BUY_ME_COFFEE_LINK} target="_blank" rel="noopener noreferrer" className="sm:absolute flex items-center right-10 top-4 relative ml-[90%] sm:ml-0">
-            <button className="flex items-center bg-transparent border border-black text-black focus:outline-none bg-[#d4d5d7] hover:bg-[#c6c9ce] rounded-xl p-2">
-              <SiBuymeacoffee className="text-xl mx-auto sm:mr-2" /> {/* Icon */}
-              <span className="hidden sm:block text-base font-cursive">Buy me a Coffee</span> {/* Text */}
+         <a href={BUY_ME_COFFEE_LINK} target="_blank" rel="noopener noreferrer" className="sm:absolute flex items-center right-10 top-4 relative ml-[90%] sm:ml-0 ">
+            <button className="flex items-center bg-transparent border border-black text-black focus:outline-none bg-[#d4d5d7] hover:bg-gray-400 rounded-xl p-2 dark:border-white dark:bg-gray-400 dark:hover:bg-gray-100">
+              <SiBuymeacoffee className="text-xl mx-auto sm:mr-2 dark:text-black" /> {/* Icon */}
+              <span className="hidden sm:block text-base font-cursive dark:text-black ">Buy me a Coffee</span> {/* Text */}
             </button>
           </a>
         {showMenuAndBgColor && (
@@ -102,8 +114,8 @@ function App() {
           </div>
         )}
 
-        <div className="container w-[90%] gsm:min-h-[100dvh] flex flex-col justify-center items-center gap-[2rem] font-primary m-auto gsm:m-0">
-          <div className="flex items-center gap-14">
+        <div className="container w-[90%] gsm:min-h-[100dvh] flex flex-col justify-center items-center gap-[2rem] font-primary m-auto gsm:m-0 dark:text-black">
+          <div className="flex items-center gap-14 shadow-black">
             {showMenuAndBgColor && (
               <Menu
                 isDrawing={isDrawing}
@@ -116,36 +128,48 @@ function App() {
                 bgColor={bgColor}
               />
             )}
+
             <div
-              className={`clearAll bg-[#CBCCCF] p-[1rem] text-[1.5rem] rounded-[50%] shadow-lg hover:bg-gray-400 cursor-pointer ${
-                !showMenuAndBgColor && "mt-12"
+              className = "flex flex-row justify-center align-center space-x-10"
+            >
+              <div
+              className={`clearAll bg-[#CBCCCF] p-[1rem] text-[1.5rem] rounded-[50%] shadow-black shadow-lg dark:shadow-white dark:shadow-sm hover:bg-gray-400 cursor-pointer ${
+                !showMenuAndBgColor && "mt-10"
               }`}
               onClick={() => {
                 setShowMenuAndBgColor((state) => !state);
               }}
             >
               {showMenuAndBgColor ? <FaRegEyeSlash /> : <FaRegEye />}
             </div>
+
+            <div
+              className={`darkLightModeToggle bg-[#CBCCCF] p-[1rem] text-[1.5rem] rounded-[50%] shadow-md hover:bg-gray-400 cursor-pointer dark:bg-black shadow-black shadow-lg dark:shadow-white dark:shadow-sm ${!showMenuAndBgColor && "mt-10"}`}
+              onClick={toggleDarkMode}
+            >
+              {darkMode ? <FaSun className="text-yellow-500" /> : <FaMoon className="text-black" />}
+            </div>
+            </div>
           </div>
           <canvas
             id="draw"
-            className={`whiteboard bg-[#DBDCDF] rounded-[0.6rem] shadow-mdm ${
+            className={`whiteboard bg-[#DBDCDF] rounded-[0.6rem] shadow-lg shadow-black dark:shadow-white dark:shadow-lg ${
               isDrawing
                 ? "cursor-crosshair"
                 : "cursor-default pointer-events-none"
             }`}
             ref={canvasRef}
           ></canvas>
           <div
-            className="clearAll bg-[#CBCCCF] p-[1rem] text-[2rem] rounded-[50%] shadow-lg hover:bg-gray-400 cursor-pointer"
+            className="clearAll bg-[#CBCCCF] p-[1rem] text-[2rem] rounded-[50%] shadow-black shadow-lg dark:shadow-white dark:shadow-md hover:bg-gray-400 cursor-pointer"
             onClick={() => {
               clearCanvas(canvasRef.current, "#B7BABF");
               setIsDrawing(true);
             }}
           >
             <RxCross1 />
           </div>
-          <h1 className="text-[0.7rem] vvsm:text-[1rem] pb-4">
+          <h1 className="text-[0.7rem] vvsm:text-[1rem] pb-4 dark:text-white">
             Made with &#128157; by{" "}
             <a
               href="https://shubham-s-socials.vercel.app/"
@@ -161,4 +185,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/components/BgColor.jsx

@@ -6,7 +6,9 @@ const BgColor = ({ color, setBgColor, canvas }) => {
     <>
       <div
         style={{ backgroundColor: color }}
-        className={`cursor-pointer m-auto w-[2rem] h-[2rem] vsm:w-[3rem] vsm:h-[3rem] rounded-[0.4rem] border-[0.2px] border-black hover:scale-110 hover:border-2`}
+        className={`cursor-pointer m-auto w-[2rem] h-[2rem] vsm:w-[3rem] vsm:h-[3rem] rounded-[0.4rem] border-[0.2px] border-black shadow-lg shadow-black dark:border-orange-400 dark:border-3 dark:shadow-white dark:shadow-md hover:scale-110 hover:border-2`}
+
+
         onClick={() => {
           setBgColor(color);
           changeBG(canvas, color);

src/components/Menu.jsx

@@ -6,6 +6,7 @@ import {FaFilePdf} from 'react-icons/fa'
 import { TbFileTypeSvg } from "react-icons/tb";
 import { useState } from "react";
 import { takeSnapshot,convertToPDF,convertToSVG } from "../utils/canvas.js";
+
 import { PiPlus } from "react-icons/pi";
 import { PiMinus } from "react-icons/pi";
 import { increaseHeight } from "../utils/canvas.js";
@@ -38,25 +39,27 @@ const Menu = ({
 
   return (
     <>
-      <div className="board max-w-[90%] flex-wrap	 tools bg-[#CBCCCF] shadow-mdm flex justify-center items-stretch gap-[1rem] md:gap-[2rem] px-[2rem] py-4 rounded-[0.6rem]">
+      <div className="max-w-[90%] flex-wrap	 tools bg-[#CBCCCF] shadow-mdm shadow-black flex justify-center items-stretch gap-[1rem] md:gap-[2rem] px-[2rem] py-4 rounded-[0.6rem] dark:shadow-white dark:shadow-md">
         <button>
-          <PiPencilSimpleFill
-            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] ${
-              isDrawing ? "bg-gray-400" : ""
-            }`}
-            onClick={toggleIsDrawing}
-            title="Draw"
-          />
+        <PiPencilSimpleFill
+          className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-black shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] ${
+            isDrawing ? "bg-gray-400" : ""
+          }`}
+          onClick={toggleIsDrawing}
+          title="Draw"
+        />
         </button>
         <button>
-          <FaFeatherPointed
-            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] ${
-              pencilWidth ? "bg-gray-400" : ""
-            }`}
-            onClick={() => setPencilWidth(!pencilWidth)}
-            title="Brush Thickness"
-          />
+        <FaFeatherPointed
+          className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-black shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] ${
+            pencilWidth ? "bg-gray-400" : ""
+          }`}
+          onClick={() => setPencilWidth(!pencilWidth)}
+          title="Brush Thickness"
+        />
+
         </button>
+
         {pencilWidth && (
           <input
             type="range"
@@ -72,7 +75,7 @@ const Menu = ({
             className="cursor-pointer"
           />
         )}
-        <div className="p-[1rem] px-[1.5rem] rounded-[0.5rem] relative shadow-vsm hover:bg-[#B7BABF] cursor-pointer">
+        <div className="p-[1rem] px-[1.5rem] rounded-[0.5rem] relative shadow-black shadow-vsm hover:bg-[#B7BABF] cursor-pointer">
           <input
             type="color"
             name="color"

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{js,jsx}", "./*.html"],
+  darkMode:"class",
   theme: {
     extend: {
       colors: {