Merge pull request #131 from ChaithanyaKrishna28/main

Added the Dark/light mode functionality
singodiyashubham87 · May 17, 2024 · 5ec3518 · 5ec3518
2 parents 69d1e86 + 12c9e5f
commit 5ec3518
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 48 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,17 +4,17 @@ 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";
 
-const tourSteps = [
+const tourSteps = [ 
   {
     target: "body",
     placement: "center",
     title: "Lets Get Started",
     content:
-      "Seems like it’s your first time here. Follow this quick walkthrough to know how get around. ",
+      "Seems like it's your first time here. Follow this quick walkthrough to know how get around. ",
     disableBeacon: true,
   },
   {
@@ -39,14 +39,16 @@ const tourSteps = [
     disableBeacon: true,
   },
 ];
+
 import { SiBuymeacoffee } from "react-icons/si";
 
 function App() {
   const canvasRef = useRef(null);
   const [isDrawing, setIsDrawing] = useState(true);
   const [thickness, setThickness] = useState(10);
   const [color, setColor] = useState("#000");
-  const [bgColor, setBgColor] = useState("#B7BABF");
+  const [bgColor, setBgColor] = useState("#b7babf");
+  const [darkMode, setDarkMode] = useState(null);
   const [showMenuAndBgColor, setShowMenuAndBgColor] = useState(true);
   const [steps] = useState(tourSteps);
 
@@ -60,6 +62,7 @@ function App() {
 
     }
   }, []);
+
   useEffect(() => {
     const canvas = canvasRef.current;
 
@@ -68,16 +71,25 @@ 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-zinc-800 dark:bg-blend-luminosity dark:text-white transform transition duration-500 ease-in-out">
+
+
       <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-4 border-black text-black focus:outline-none bg-[#d4d5d7] transform transition duration-300 ease-in-out hover:bg-gray-400 rounded-xl p-2 dark:border-black dark:border-4 dark:bg-gray-400  dark:hover:md:bg-gray-100 hover:md:scale-110 dark:shadow-lg dark:shadow-black">
+              <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 shadow-none">
+          <div className="flex items-center gap-14 shadow-black">
             {showMenuAndBgColor && (
               <Menu
                 isDrawing={isDrawing}
@@ -116,36 +128,49 @@ 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-md  transform transition duration-300 ease-in-out text-black hover:bg-gray-400 cursor-pointer dark:bg-slate-800 dark:text-[#ffffff] hover:md:scale-110 ${
+                !showMenuAndBgColor && "mt-10"
               }`}
               onClick={() => {
                 setShowMenuAndBgColor((state) => !state);
               }}
             >
               {showMenuAndBgColor ? <FaRegEyeSlash /> : <FaRegEye />}
             </div>
+
+            <div
+              className={`darkLightModeToggle  p-[1rem] text-[1.5rem] rounded-[50%] shadow-md hover:bg-gray-1000 transform transition duration-300 ease-in-out hover:md:scale-110 cursor-pointer bg-black dark:bg-amber-400 shadow-black dark:shadow-black dark:shadow-md ${!showMenuAndBgColor && "mt-10"}`}
+              onClick={toggleDarkMode}
+            >
+              {darkMode ? <FaSun className="text-black" /> : <FaMoon className="text-white" />}
+            </div>
+            </div>
           </div>
           <canvas
             id="draw"
-            className={`whiteboard bg-[#DBDCDF] rounded-[0.6rem] shadow-mdm ${
+            className={`whiteboard bg-slate-950 rounded-[0.6rem] shadow-md shadow-black dark:shadow-black 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-vsm dark:shadow-black dark:shadow-lg hover:bg-gray-400 cursor-pointer transform transition duration-300 ease-in-out dark:bg-red-700 dark:text-[#111111]  hover:md:scale-110"
             onClick={() => {
-              clearCanvas(canvasRef.current, "#B7BABF");
+              clearCanvas(canvasRef.current,bgColor);
               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/"
@@ -158,7 +183,6 @@ function App() {
         </div>
       </div>
     </>
-  );
-}
-
-export default App;
+  )
+};
+export default App;
diff --git a/src/components/BgColor.jsx b/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-2 dark:border-black hover:scale-110 hover:border-2`}
+
+
         onClick={() => {
           setBgColor(color);
           changeBG(canvas, color);

diff --git a/src/components/Menu.jsx b/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] text-black cursor-pointer dark:bg-[#111111] dark:text-[#ffffff] transform transition duration-300 ease-in-out hover:bg-[#B7BABF] dark:hover:bg-gray-800 ${
+            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] text-black dark:bg-[#111111] dark:text-[#ffffff] cursor-pointer hover:bg-[#B7BABF]transform transition duration-300 ease-in-out ${
+            pencilWidth ? "bg-gray-200" : ""
+          }`}
+          onClick={() => setPencilWidth(!pencilWidth)}
+          title="Brush Thickness"
+        />
+
         </button>
+
         {pencilWidth && (
           <input
             type="range"
@@ -72,22 +75,22 @@ 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] text-black text-blackcursor-pointer">
           <input
             type="color"
             name="color"
             id="color"
             title="Color Picker"
             onChange={(e) => setColor(e.target.value)}
-            className={`bg-[#CBCCCF] p-[0.5rem] shadow-vsm rounded-[0.5rem] cursor-pointer outline-none hover:bg-[#B7BABF] flex-[0.5] w-full h-full z-[5] absolute top-0 left-0`}
+            className={`bg-[#CBCCCF] p-[0.5rem] shadow-vsm rounded-[0.5rem] cursor-pointer outline-none hover:bg-[#B7BABF] flex-[0.5] w-full h-full z-[5] absolute top-0 left-0 dark:bg-[#111111] dark:text-[#ffffff] transform transition duration-300 ease-in-out `}
           />
         </div>
         <div className="relative">
           <button
             id="dropdownHoverButton"
             data-dropdown-toggle="dropdownHover"
             data-dropdown-trigger="hover"
-            className="text-gray-700 bg-[#B7BABF] focus:ring-4 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center"
+            className="text-gray-700 bg-[#B7BABF] focus:ring-4 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:bg-[#111111] dark:text-[#ffffff] transform transition duration-300 ease-in-out "
             type="button"
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
@@ -102,26 +105,26 @@ const Menu = ({
             id="dropdownHover"
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
-            className={`absolute z-10 ${isOpen ? '' : 'hidden'} divide-y bg-[#CBCCCF] rounded-lg shadow w-48 top-[3.1rem]`}
+            className={`absolute z-10 ${isOpen ? '' : 'hidden'} divide-y bg-[#CBCCCF] rounded-lg shadow w-48 top-[3.1rem] `}
           >
-            <ul className="text-sm text-gray-700 flex space-x-3 p-3 justify-center" aria-labelledby="dropdownHoverButton">
+            <ul className="text-sm text-gray-700 flex space-x-3 p-3 justify-center  " aria-labelledby="dropdownHoverButton">
               <li>
                 <RiScreenshot2Fill
-                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] dark:bg-[#111111] dark:text-[#ffffff]  `}
                   onClick={() => takeSnapshot(canvasRef.current, color)}
                   title="Snapshot"
                 />
               </li>
               <li>
                 <FaFilePdf 
-                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] dark:bg-[#111111] dark:text-[#ffffff]  `}
                   onClick={()=>convertToPDF(canvasRef.current)}
                   title="PDF"
                 />
               </li>
               <li>
                 <TbFileTypeSvg
-                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF] dark:bg-[#111111] dark:text-[#ffffff]  `}
                   onClick={()=>convertToSVG(canvasRef.current)}
                   title="SVG"
                 />
@@ -131,14 +134,14 @@ const Menu = ({
         </div>
         <button>
           <PiPlus
-            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer hover:bg-[#B7BABF] dark:bg-[#111111] dark:text-[#ffffff] transform transition duration-300 ease-in-out `}
             onClick={() => increaseHeight(canvasRef.current, bgColor)}
             title="IncreaseHeight"
           />
         </button>
         <button>
           <PiMinus
-            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer hover:bg-[#B7BABF] dark:bg-[#111111] dark:text-[#ffffff] transform transition duration-300 ease-in-out `}
             onClick={() => decreaseHeight(canvasRef.current, bgColor)}
             title="DecreaseHeight"
           />

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