Merge pull request #16 from unknown91tech/dark_mode_feature

added the features + previous pr

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

app/App.tsx

@@ -24,6 +24,7 @@ import { useMutation, useRedo, useStorage, useUndo } from "@/liveblocks.config";
 import { defaultNavElement } from "@/constants";
 import { handleDelete, handleKeyDown } from "@/lib/key-events";
 import { handleImageUpload } from "@/lib/shapes";
+import { useTheme } from "next-themes";
 
 function App() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -53,6 +54,22 @@ function App() {
     fill: "#aabbcc",
     stroke: "#000000",
   });
+
+
+  const {systemTheme, theme, setTheme} = useTheme();
+  const currentTheme = theme === "dark" ? systemTheme : theme;
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if(currentTheme==='dark'){
+      setDarkMode(true);
+    }
+    else{
+      setDarkMode(false);
+    }
+  },[currentTheme])
+
+  // console.log(themeCheck)
+  console.log(darkMode)
 
   const syncShapeInStorage = useMutation(({ storage }, object) => {
     if (!object) return;
@@ -229,6 +246,8 @@ function App() {
   }, [canvasObjects]);
 
   return (
+    <div className={`${darkMode ? "bg-primary-grey-200 text-white " : " bg-slate-200 text-black" }`}>
+
     <main className="h-[100dvh] overflow-hidden">
       <Navbar
         activeElement={activeElement}
@@ -258,6 +277,7 @@ function App() {
         />
       </section>
     </main>
+    </div>
   );
 }
 

app/faq/page.tsx

@@ -1,6 +1,7 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
+import { useTheme } from "next-themes";
 
 const faqs = [
   {
@@ -56,18 +57,31 @@ const FAQ = () => {
   const toggleFAQ = (index: number) => {
     setActiveIndex(index === activeIndex ? null : index);
   };
+  const {systemTheme, theme, setTheme} = useTheme();
+  const currentTheme = theme === "dark" ? systemTheme : theme;
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if(currentTheme==='dark'){
+      setDarkMode(true);
+    }
+    else{
+      setDarkMode(false);
+    }
+  },[currentTheme])
+  // console.log(themeCheck)
+  // console.log(darkMode)
 
   return (
     <div className="container mx-auto p-6 min-h-screen h-screen overflow-y-auto">
       {/* Home Button */}
       <div className="text-left mb-4">
         <Link href="/">
-          <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300">
+          <button className={`px-4 py-2 rounded ${darkMode ? "bg-blue-500 text-white  hover:bg-blue-600 " : "bg-blue-500 text-black  hover:bg-blue-600" }transition duration-300`}>
             Home
           </button>
         </Link>
       </div>
-      <h1 className="text-4xl font-bold mb-6 text-center text-white">
+      <h1 className={`text-4xl font-bold mb-6 text-center ${darkMode ? "text-white " : "text-black"}`}>
         Frequently Asked Questions
       </h1>
       <div className="space-y-4 max-w-2xl mx-auto">
@@ -80,17 +94,17 @@ const FAQ = () => {
             <div className="flex justify-between items-center">
               <h2
                 className={`font-semibold text-lg ${
-                  activeIndex === index ? "text-white" : "text-gray-300"
+                  activeIndex === index ? darkMode ? "text-white" : "text-black" :"text-white"
                 }`}
               >
                 {faq.question}
               </h2>
-              <span className="text-gray-400">
+              <span className={` ${darkMode ? "text-gray-400" : "text-black"}`}>
                 {activeIndex === index ? "-" : "+"}
               </span>
             </div>
             {activeIndex === index && (
-              <p className="mt-2 text-gray-300">{faq.answer}</p>
+              <p className={`mt-2  ${darkMode ? "text-gray-400" : "text-black"}`}>{faq.answer}</p>
             )}
           </div>
         ))}

app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Work_Sans } from "next/font/google";
 import "./globals.css";
 import { Room } from "./Room";
+import ThemeProvider from "./provider";
+import ThemeSwitcher from "@/components/ui/ThemeSwitcher";
 
 const workSans = Work_Sans({
   subsets: ["latin"],
@@ -22,7 +24,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${workSans.className} bg-primary-grey-200`}>
+      <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+        >
+
         <Room>{children}</Room>
+        </ThemeProvider>
       </body>
     </html>
   );

app/provider.tsx

@@ -0,0 +1,5 @@
+"use client";
+import {ThemeProvider as NextThemesProvider} from "next-themes";
+export default function ThemeProvider({children, ...props}) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

components/LeftSideBar.tsx

@@ -1,14 +1,32 @@
 "use client";
 
 import { getShapeInfo } from "@/lib/utils";
+import { useTheme } from "next-themes";
 import Image from "next/image";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 function LeftSideBar({ allShapes }: { allShapes: Array<any> }) {
+
+  const {systemTheme, theme, setTheme} = useTheme();
+  const currentTheme = theme === "dark" ? systemTheme : theme;
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if(currentTheme==='dark'){
+      setDarkMode(true);
+    }
+    else{
+      setDarkMode(false);
+    }
+  },[currentTheme])
+  // console.log(themeCheck)
+  // console.log(darkMode)
+
+
   const memoizedShapes = useMemo(
     () => (
-      <section className="flex flex-col border-t border-primary-grey-200 bg-primary-black text-primary-grey-300 min-w-[227px] sticky left-0 h-full max-sm:hidden select-none overflow-y-auto pb-20">
-        <h3 className="border border-primary-grey-200 px-5 py-4 text-xs uppercase">
+      <div className={`${darkMode? "border-primary-grey-200 bg-primary-black text-primary-grey-300" : "bg-white text-black"}`}>
+      <section className={`flex flex-col border-t  min-w-[227px] sticky left-0 h-full max-sm:hidden select-none overflow-y-auto pb-20`}>
+        <h3 className={`border  px-5 py-4 ${darkMode ? "text-white" : "text-black "} text-xs uppercase`}>
           Layers
         </h3>
         <div className="flex flex-col">
@@ -18,7 +36,7 @@ function LeftSideBar({ allShapes }: { allShapes: Array<any> }) {
             return (
               <div
                 key={shape[1]?.objectId}
-                className="group my-1 flex items-center gap-2 px-5 py-2.5 hover:cursor-pointer hover:bg-primary-green hover:text-primary-black"
+                className={`group my-1 flex items-center gap-2 px-5 py-2.5 hover:cursor-pointer hover:bg-primary-green  ${darkMode ?"hover:text-primary-black" : "hover:text-white"}`}
               >
                 <Image
                   src={info?.icon}
@@ -35,10 +53,11 @@ function LeftSideBar({ allShapes }: { allShapes: Array<any> }) {
           })}
         </div>
       </section>
+      </div>
     ),
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [allShapes?.length]
+    [allShapes?.length, darkMode]
   );
 
   return memoizedShapes;

components/Live.tsx

@@ -22,6 +22,7 @@ import FlyingReaction from "./reaction/FlyingReaction";
 import useInterval from "@/hooks/useInterval";
 import Comments from "./comments/Comments";
 import { shortcuts } from "@/constants";
+import { useTheme } from "next-themes";
 
 type Props = {
   canvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
@@ -30,6 +31,21 @@ type Props = {
 };
 
 function Live({ canvasRef, undo, redo }: Props) {
+
+  const {systemTheme, theme, setTheme} = useTheme();
+  const currentTheme = theme === "dark" ? systemTheme : theme;
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if(currentTheme==='dark'){
+      setDarkMode(true);
+    }
+    else{
+      setDarkMode(false);
+    }
+  },[currentTheme])
+  // console.log(themeCheck)
+  // console.log(darkMode)
+
   const [cursorState, setCursorState] = useState<CursorState>({
     mode: CursorMode.Hidden,
   });
@@ -234,12 +250,12 @@ function Live({ canvasRef, undo, redo }: Props) {
 
         <Comments />
       </ContextMenuTrigger>
-      <ContextMenuContent id="canvas" className="right-menu-content">
+      <ContextMenuContent id="canvas" className={`${darkMode ? "bg-primary-grey-200 text-white " : "bg-white text-black  "}`}>
         {shortcuts.map((shortcut) => (
           <ContextMenuItem
             key={shortcut.key}
             onClick={() => handleContextMenuClick(shortcut.name)}
-            className="right-menu-item"
+            className={`${darkMode ? "bg-primary-grey-200 text-white " : "bg-white text-black  "}`}
           >
             <p>{shortcut.name}</p>
             <p className="text-xs text-primary-grey-300">{shortcut.shortcut}</p>

components/Navbar.tsx

@@ -1,30 +1,50 @@
 "use client";
 
 import Image from "next/image";
-import { memo } from "react";
+import React ,{ memo, useState , useEffect } from "react";
 import Link from "next/link";
+
 import { ActiveElement, NavbarProps } from "@/types/type";
 
 import ActiveUsers from "./users/ActiveUsers";
 import { navElements } from "@/constants";
 import NewThread from "./comments/NewThread";
 import { Button } from "./ui/button";
 import ShapesMenu from "./ShapesMenu";
+import ThemeSwitcher from "./ui/ThemeSwitcher";
+import { useTheme } from "next-themes";
 
 function Navbar({
   activeElement,
   imageInputRef,
   handleImageUpload,
-  handleActiveElement,
+  handleActiveElement
 }: NavbarProps) {
   const isActive = (value: string | Array<ActiveElement>) =>
     (activeElement && activeElement.value === value) ||
     (Array.isArray(value) &&
       value.some((val) => val?.value === activeElement?.value));
 
+  const {systemTheme, theme, setTheme} = useTheme();
+  const currentTheme = theme === "dark" ? systemTheme : theme;
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if(currentTheme==='dark'){
+      setDarkMode(true);
+    }
+    else{
+      setDarkMode(false);
+    }
+  },[currentTheme])
+
+  // console.log(themeCheck)
+  console.log(darkMode)
+
   return (
-    <nav className="flex select-none items-center justify-between gap-4 bg-primary-black px-5 text-white">
-      <Link href="/">
+    <div className={`${darkMode ? "bg-primary-black text-white" : "bg-white text-black border-b-0 border-black"}`}>
+
+    <nav className={`flex select-none items-center justify-between gap-4  px-5`}>
+    <Link href="/">
         <Image
           src="/assets/logo.png"
           alt="Logo"
@@ -50,8 +70,8 @@ function Navbar({
               : "hover:bg-primary-grey-200"
           }
           `}
-            >
-              {Array.isArray(item.value) ? ( // Renders shapes menu
+          >
+             {Array.isArray(item.value) ? ( // Renders shapes menu
                 <ShapesMenu
                   item={item}
                   activeElement={activeElement}
@@ -73,7 +93,7 @@ function Navbar({
                 </NewThread>
               ) : (
                 // Renders other nav elements
-                <Button className="relative w-5 h-5 object-contain">
+                <Button className={`relative w-5 h-5 object-contain p-2 items-center justify-center  focus:outline-none focus:ring-0 ${darkMode ? "border-gray-300 text-white  " : " text-black  "}`}>
                   <Image
                     src={item.icon}
                     alt={item.name}
@@ -82,29 +102,34 @@ function Navbar({
                     className={isActive(item.value) ? "invert" : ""}
                   />
                 </Button>
-              )}
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      <div className="flex space-x-4 text-white">
-        <Link
-          href="/"
-          className="hover:underline hover:text-gray-300 transition duration-300 ease-in-out"
-        >
-          Home
-        </Link>
-        <Link
-          href="/faq"
-          className="hover:underline hover:text-gray-300 transition duration-300 ease-in-out"
-        >
-          FAQ
-        </Link>
+                )}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className={`flex space-x-4 ${darkMode ? "text-white" : "text-black"}`}>
+            <Link
+              href="/"
+              className="hover:underline  transition duration-300 ease-in-out"
+            >
+              Home
+            </Link>
+            <Link
+              href="/faq"
+              className="hover:underline  transition duration-300 ease-in-out"
+            >
+              FAQ
+            </Link>
+          </div>
+      <div className="flex items-center" >
+        <ThemeSwitcher/>
       </div>
-
+      
       <ActiveUsers />
     </nav>
+    </div>
+
   );
 }