Dark mode (#1154)

* create theme context

* create theme toggle btn

* update: tailwind dark theme classes

* fixes: toggling & icon update

* update dark mode in components & pages

* typo fixes

Author: Avdhesh-Varshney

frontend/src/components/AboutUser.jsx

@@ -12,7 +12,13 @@ const AboutUser = ({ className, bio, social_links, joinedAt }) => {
                         let link = social_links[key];
                         return link ?
                             <Link to={link} key={key} target="_blank">
-                                <i className={"fi " + (key !== 'website' ? "fi-brands-" + key : "fi-rr-globe") + " text-2xl hover:text-black"} ></i>
+                                <i
+                                    className={
+                                        "fi " +
+                                        (key !== 'website' ? "fi-brands-" + key : "fi-rr-globe") +
+                                        " text-2xl text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
+                                    }
+                                ></i>
                             </Link> :
                             ""
                     })

frontend/src/components/CommentCard.jsx

@@ -122,7 +122,8 @@ const CommentCard = ({ index, leftVal, commentData }) => {
         let btn = (
             <button
                 onClick={() => loadReplies({ skip: index - parentIndex, currentIndex: getParentIndex() })}
-                className="text-gray-500 p-2 px-3 hover:bg-gray-50 rounded-md flex items-center gap-2">
+                className="text-[#555] dark:text-gray-300 p-2 px-3 hover:bg-[#f3f3f3] dark:hover:bg-[#1e1e1e] rounded-md flex items-center gap-2"
+            >
                 Load More Replies
             </button>
         );
@@ -159,13 +160,13 @@ const CommentCard = ({ index, leftVal, commentData }) => {
                         commentData.isReplyLoaded ?
                             <button
                                 onClick={hideReplies}
-                                className="text-gray-500 p-2 px-3 hover:bg-gray-50 rounded-md flex items-center gap-2"
+                                className="text-[#555] dark:text-gray-300 p-2 px-3 hover:bg-[#f3f3f3] dark:hover:bg-[#1e1e1e] rounded-md flex items-center gap-2"
                             >
                                 <i className="fi fi-rs-comment-dots"></i> Hide Reply
                             </button> :
                             <button
                                 onClick={loadReplies}
-                                className="text-gray-500 p-2 px-3 hover:bg-gray-50 rounded-md flex items-center gap-2"
+                                className="text-[#555] dark:text-gray-300 p-2 px-3 hover:bg-[#f3f3f3] dark:hover:bg-[#1e1e1e] rounded-md flex items-center gap-2"
                             >
                                 <i className="fi fi-rs-comment-dots"></i> {children.length} Reply
                             </button>

frontend/src/components/CommentField.jsx

@@ -70,7 +70,7 @@ const CommentField = ({ action, index = undefined, replyingTo = undefined, setRe
             >
             </textarea>
             <button
-                className="btn-dark mt-5 px-10"
+                className="btn-dark dark:btn-light mt-5 px-10"
                 onClick={handleComment}
             >
                 {action}

frontend/src/components/Comments.jsx

@@ -41,15 +41,22 @@ const CommentsContainer = () => {
     }
 
     return (
-        <div className={"max-sm:w-full fixed " + (commentsWrapper ? "top-0 sm:right-0" : "top-[100%] sm:right-[-100%]") + " duration-700 max-sm:right-0 sm:top-0 w-[30%] min-w-[350px] h-full z-50 bg-white shadow-2xl p-8 px-16 overflow-y-auto overflow-x-hidden"}>
+        <div
+            className={
+                "max-sm:w-full fixed " +
+                (commentsWrapper ? "top-0 sm:right-0" : "top-[100%] sm:right-[-100%]") +
+                " duration-700 max-sm:right-0 sm:top-0 w-[30%] min-w-[350px] h-full z-50 " +
+                "bg-white dark:bg-[#121212] shadow-2xl dark:shadow-lg text-black dark:text-gray-200 p-8 px-16 overflow-y-auto overflow-x-hidden"
+            }
+        >
 
             <div className="relative">
                 <h1 className="font-medium text-xl">Comments</h1>
                 <p className="text-lg mt-2 w-[70%] text-gray-500 line-clamp-1">{title}</p>
 
                 <button
                     onClick={() => setCommentsWrapper(preVal => !preVal)}
-                    className="absolute top-0 right-0 flex justify-center items-center w-12 h-12 rounded-full bg-gray-100"
+                    className="absolute top-0 right-0 flex justify-center items-center w-12 h-12 rounded-full bg-gray-100 dark:bg-[#09090b]"
                 >
                     <i className="fi fi-br-cross text-2xl mt-1"></i>
                 </button>

frontend/src/components/InPageNavigation.jsx

@@ -39,14 +39,14 @@ const InPageNavigation = ({ routes, defaultHidden = [], defaultActiveIndex = 0,
 
     return (
         <>
-            <div className="relative mb-8 bg-white border-b border-gray-200 flex flex-nowrap overflow-x-auto">
+            <div className="relative mb-8 bg-[#fafafa] dark:bg-[#09090b] border-b border-gray-200 flex flex-nowrap overflow-x-auto">
                 {
                     routes.map((route, i) => {
                         return (
                             <button
                                 ref={i === defaultActiveIndex ? activeTabRef : null}
                                 key={i}
-                                className={"p-4 px-5 capitalize " + (inPageNavIndex === i ? "text-black " : "text-dark-grey " + (defaultHidden.includes(route) ? "md:hidden" : ""))}
+                                className={"p-4 px-5 capitalize " + (inPageNavIndex === i ? "text-black dark:text-[#ededed] " : "text-dark-grey dark:text-[#a3a3a3] " + (defaultHidden.includes(route) ? "md:hidden" : ""))}
                                 onClick={(e) => { changePageState(e.target, i) }}
                             >
                                 {route}

frontend/src/components/LoadMoreData.jsx

@@ -4,7 +4,7 @@ const LoadMoreDataBtn = ({ state, fetchDataFun, additionalParam }) => {
         return (
             <button
                 onClick={() => fetchDataFun({ ...additionalParam, page: state.page + 1 })}
-                className="text-gray-800 p-2 px-3 hover:bg-gray-50 rounded-md flex items-center gap-2"
+                className="text-gray-800 dark:text-gray-200 p-2 px-3 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2 transition-colors"
             >
                 Load More
             </button>

frontend/src/components/Navbar.jsx

@@ -3,6 +3,7 @@ import { Link, Outlet, useNavigate } from "react-router-dom";
 import { UserContext } from "../App";
 import UserNavigationPanel from "./UserNavigationPanel";
 import SubscribeModal from "./SubscribeModal";
+import ThemeToggle from "./ThemeToggle";
 import axios from "axios";
 
 const Navbar = () => {
@@ -58,26 +59,30 @@ const Navbar = () => {
         <>
             <nav className="navbar z-50">
                 <Link to="/" className="flex-none w-10">
-                    <img src="/logo.png" alt="" className="w-full" />
+                    <img src="/logo.png" alt="" className="w-full dark:invert" />
                 </Link>
 
-                <div className={"absolute bg-white w-full left-0 top-full mt-0.5 border-b border-gray-200 py-4 px-[5vw] md:border-0 md:relative md:inset-0 md:p-0 md:w-auto " + (searchBoxVisibility ? "show" : "hidden md:block")}
+                <div
+                    className={"absolute bg-[#fafafa] dark:bg-[#09090b] w-full left-0 top-full mt-0.5 border-b border-gray-200 dark:border-[#27272a] py-4 px-[5vw] md:border-0 md:relative md:inset-0 md:p-0 md:w-auto " +
+                        (searchBoxVisibility ? "show" : "hidden md:block")}
                 >
                     <input
                         type="text"
                         placeholder="Search"
-                        className="w-full md:w-auto bg-gray-100 p-4 pl-6 pr-[12%] md:pr-6 rounded-full placeholder:text-dark-grey md:pl-12"
+                        className="w-full md:w-auto bg-[#ffffff] dark:bg-[#18181b] p-4 pl-6 pr-[12%] md:pr-6 rounded-full placeholder:text-dark-grey dark:placeholder:text-gray-400 md:pl-12"
                         onKeyDown={handleSearch}
                     />
-                    <i className="fi fi-rr-search absolute right-[10%] md:pointer-events-none md:left-5 top-1/2 -translate-y-1/2 text-xl text-dark-grey"></i>
+                    <i className="fi fi-rr-search absolute right-[10%] md:pointer-events-none md:left-5 top-1/2 -translate-y-1/2 text-xl text-dark-grey dark:text-gray-400"></i>
                 </div>
 
                 <div className="flex items-center gap-3 md:gap-6 ml-auto">
-                    <button className="md:hidden bg-gray-100 w-12 h-12 rounded-full flex items-center justify-center" onClick={() => setSearchBoxVisibility(!searchBoxVisibility)}>
-                        <i className="fi fi-rr-search text-xl"></i>
+                    <button className="md:hidden bg-[#ffffff] dark:bg-[#18181b] w-12 h-12 rounded-full flex items-center justify-center" onClick={() => setSearchBoxVisibility(!searchBoxVisibility)}>
+                        <i className="fi fi-rr-search text-xl text-dark-grey dark:text-gray-400"></i>
                     </button>
 
-                    <Link to="/editor" className="hidden md:flex items-center gap-2 text-gray-700 hover:text-black hover:bg-gray-200 p-3 px-4 rounded-lg transition">
+                    <ThemeToggle />
+
+                    <Link to="/editor" className="hidden md:flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-200 dark:hover:bg-[#27272a] p-3 px-4 rounded-lg transition">
                         <i className="fi fi-rr-file-edit"></i>
                         <p>Write</p>
                     </Link>
@@ -86,7 +91,7 @@ const Navbar = () => {
                         access_token ?
                             <>
                                 <Link to="/dashboard/notifications">
-                                    <button className="w-12 h-12 rounded-full bg-gray-200 relative hover:bg-black/10">
+                                    <button className="w-12 h-12 rounded-full relative text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-200 dark:hover:bg-[#27272a]">
                                         <i className="fi fi-rr-bell text-2xl block mt-1"></i>
                                         {
                                             new_notification_available ?
@@ -112,15 +117,15 @@ const Navbar = () => {
                             <>
                                 <button
                                     onClick={toggleSubscribeModal}
-                                    className="text-gray-700 bg-gray-200 py-2 px-4 rounded-full transition cursor-pointer"
+                                    className="text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-200 dark:hover:bg-[#27272a] py-2 px-4 rounded-full transition cursor-pointer"
                                 >
                                     <i className="fi fi-rr-envelope-plus text-xl"></i>
                                 </button>
 
-                                <Link className="bg-black text-white py-2 px-5 rounded-full hover:bg-gray-800 transition" to="/login">
+                                <Link className="bg-black dark:bg-gray-200 text-white dark:text-gray-800 py-2 px-5 rounded-full hover:bg-gray-800 dark:hover:bg-[#ffffff] transition" to="/login">
                                     Login
                                 </Link>
-                                <Link className="bg-gray-200 text-gray-800 py-2 px-5 rounded-full hidden md:block hover:bg-gray-300 transition" to="/signup">
+                                <Link className="bg-gray-200 dark:bg-black text-gray-800 dark:text-white py-2 px-5 rounded-full hidden md:block hover:bg-gray-300 dark:hover:bg-[#27272a] transition" to="/signup">
                                     Sign Up
                                 </Link>
                             </>

frontend/src/components/NoData.jsx

@@ -1,6 +1,6 @@
 const NoDataMessage = ({ message }) => {
     return (
-        <div className="text-center w-full p-4 rounded-full bg-gray-50 mt-4">
+        <div className="text-center w-full p-4 rounded-full bg-gray-50 dark:bg-[#1a1a1a] text-gray-800 dark:text-gray-200 mt-4">
             <p>{message}</p>
         </div>
     )

frontend/src/components/NotificationCard.jsx

@@ -50,7 +50,12 @@ const NotificationCard = ({ data, index, notificationState }) => {
                 <div className="w-full">
                     <h1 className="font-medium text-xl text-gray-500">
                         <span className="lg:inline-block hidden capitalize">{fullname}</span>
-                        <Link to={`/user/${username}`} className="mx-1 text-black underline">@{username}</Link>
+                        <Link
+                            to={`/user/${username}`}
+                            className="mx-1 text-black underline hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
+                        >
+                            @{username}
+                        </Link>
                         <span className="font-normal">
                             {
                                 type === 'like' ? "liked your project" :
@@ -62,10 +67,13 @@ const NotificationCard = ({ data, index, notificationState }) => {
 
                     {
                         type === 'reply' ?
-                            <div className="p-4 mt-4 rounded-md bg-gray-100">
+                            <div className="p-4 mt-4 rounded-md bg-gray-100 dark:bg-gray-700">
                                 <p>{replied_on_comment.comment}</p>
                             </div> :
-                            <Link to={`/project/${project_id}`} className="font-medium text-gray-500 hover:underline line-clamp-1">
+                            <Link
+                                to={`/project/${project_id}`}
+                                className="font-medium text-gray-500 hover:underline line-clamp-1 dark:text-gray-300 dark:hover:text-blue-400"
+                            >
                                 {`"${title}"`}
                             </Link>
                     }
@@ -87,7 +95,7 @@ const NotificationCard = ({ data, index, notificationState }) => {
                             {
                                 !reply ?
                                     <button
-                                        className="underline hover:text-black"
+                                        className="underline hover:text-black dark:hover:text-white"
                                         onClick={handleReplyClick}
                                     >
                                         Reply
@@ -96,7 +104,7 @@ const NotificationCard = ({ data, index, notificationState }) => {
                             }
 
                             <button
-                                className="underline hover:text-black"
+                                className="underline hover:text-black dark:hover:text-white"
                                 onClick={(e) => handleDelete(comment._id, "comment", e.target)}
                             >
                                 Delete
@@ -116,25 +124,25 @@ const NotificationCard = ({ data, index, notificationState }) => {
 
             {
                 reply ?
-                    <div className="ml-20 p-5 bg-gray-100 mt-5 rounded-md">
+                    <div className="ml-20 p-5 bg-gray-100 dark:bg-gray-700 mt-5 rounded-md">
                         <div className="flex gap-3 mb-3">
                             <img src={author_profile_img} className="w-8 h-8 rounded-full" alt="" />
 
                             <div>
                                 <h1 className="font-medium text-xl text-gray-500">
-                                    <Link to={`/user/${author_username}`} className="mx-1 text-black underline">@{author_username}</Link>
+                                    <Link to={`/user/${author_username}`} className="mx-1 text-black dark:text-white underline">@{author_username}</Link>
 
                                     <span className="font-normal">replied to</span>
 
-                                    <Link to={`/user/${username}`} className="mx-1 text-black underline">@{username}</Link>
+                                    <Link to={`/user/${username}`} className="mx-1 text-black dark:text-white underline">@{username}</Link>
                                 </h1>
                             </div>
                         </div>
 
                         <p className="ml-14 font-gelasio text-xl my-2">{reply.comment}</p>
 
                         <button
-                            className="underline hover:text-black ml-14 mt-2"
+                            className="underline hover:text-black hover:dark:text-white ml-14 mt-2"
                             onClick={(e) => handleDelete(reply._id, "reply", e.target)}
                         >
                             Delete

frontend/src/components/ProjectEditor.jsx

@@ -158,9 +158,9 @@ const ProjectEditor = () => {
         <>
             <nav className="navbar">
                 <Link to="/" className="flex-none w-10">
-                    <img src="logo.png" />
+                    <img src="logo.png" alt="" className="dark:invert" />
                 </Link>
-                <p className="max-md:hidden text-black line-clamp-1 w-full">
+                <p className="max-md:hidden text-black dark:text-white line-clamp-1 w-full">
                     {title.length ? title : "New Project"}
                 </p>