Merge pull request chetanverma16#65 from chetanverma16/63-add-dark-mode

adding Dark Mode
kemerald25 · Jul 27, 2022 · b5a7909 · b5a7909
2 parents 7828b11 + 9fcd2bd
commit b5a7909
Show file tree

Hide file tree

Showing 19 changed files with 273 additions and 3,309 deletions.
diff --git a/components/BlogEditor/index.js b/components/BlogEditor/index.js
@@ -2,10 +2,12 @@ import React, { useState } from "react";
 import Button from "../../components/Button";
 import DatePicker from "react-datepicker";
 import TextareaAutosize from "react-textarea-autosize";
+import { useTheme } from "next-themes";
 
 import "react-datepicker/dist/react-datepicker.css";
 
 const BlogEditor = ({ post, close, refresh }) => {
+  const { theme } = useTheme();
   const [currentTabs, setCurrentTabs] = useState("BLOGDETAILS");
   const [blogContent, setBlogContent] = useState(post.content);
   const [blogVariables, setBlogVariables] = useState({
@@ -40,7 +42,11 @@ const BlogEditor = ({ post, close, refresh }) => {
   };
 
   return (
-    <div className="fixed z-10 w-screen h-screen overflow-auto top-0 flex flex-col items-center bg-white">
+    <div
+      className={`fixed z-10 w-screen h-screen overflow-auto top-0 flex flex-col items-center ${
+        theme === "dark" ? "bg-black" : "bg-white"
+      }`}
+    >
       <div className="container my-20">
         <div className="mt-10">
           <div className="z-10 sticky top-12">
@@ -75,7 +81,7 @@ const BlogEditor = ({ post, close, refresh }) => {
               <label className="w-full text-sx opacity-50">Date</label>
               <DatePicker
                 selected={new Date(blogVariables.date)}
-                className="w-full mt-2 p-4 border hover:border-blue-400 rounded-md shadow-lg border-2"
+                className="w-full mt-2 p-4 hover:border-blue-400 rounded-md shadow-lg border-2"
                 onChange={(date) => {
                   setBlogVariables({
                     ...blogVariables,
@@ -91,7 +97,7 @@ const BlogEditor = ({ post, close, refresh }) => {
                 onChange={(e) =>
                   setBlogVariables({ ...blogVariables, title: e.target.value })
                 }
-                className="w-full mt-2 p-4 border hover:border-blue-400 rounded-md shadow-lg border-2"
+                className="w-full mt-2 p-4 hover:border-blue-400 rounded-md shadow-lg border-2"
                 type="text"
               ></input>
             </div>
@@ -106,7 +112,7 @@ const BlogEditor = ({ post, close, refresh }) => {
                     tagline: e.target.value,
                   })
                 }
-                className="w-full mt-2 p-4 border hover:border-blue-400 rounded-md shadow-lg border-2"
+                className="w-full mt-2 p-4 hover:border-blue-400 rounded-md shadow-lg border-2"
                 type="text"
               ></input>
             </div>
@@ -120,7 +126,7 @@ const BlogEditor = ({ post, close, refresh }) => {
                     preview: e.target.value,
                   })
                 }
-                className="w-full mt-2 p-4 border hover:border-blue-400 rounded-md shadow-lg border-2"
+                className="w-full mt-2 p-4 hover:border-blue-400 rounded-md shadow-lg border-2"
                 type="text"
               ></textarea>
             </div>
@@ -134,7 +140,7 @@ const BlogEditor = ({ post, close, refresh }) => {
                     image: e.target.value,
                   })
                 }
-                className="w-full mt-2 p-4 border hover:border-blue-400 rounded-md shadow-lg border-2"
+                className="w-full mt-2 p-4 hover:border-blue-400 rounded-md shadow-lg border-2"
                 type="text"
               ></input>
             </div>

diff --git a/components/Button/index.js b/components/Button/index.js
@@ -1,12 +1,16 @@
 import React from "react";
+import { useTheme } from "next-themes";
 
 const Button = ({ children, type, onClick, classes }) => {
+  const { theme } = useTheme();
   if (type === "primary") {
     return (
       <button
         onClick={onClick}
         type="button"
-        className="text-sm tablet:text-base p-1 laptop:p-2 m-1 laptop:m-2 rounded-lg text-white bg-black transition-all duration-300 ease-out first:ml-0 hover:scale-105 active:scale-100"
+        className={`text-sm tablet:text-base p-1 laptop:p-2 m-1 laptop:m-2 rounded-lg ${
+          theme === "dark" ? "bg-white text-black" : "bg-black text-white"
+        }  transition-all duration-300 ease-out first:ml-0 hover:scale-105 active:scale-100`}
       >
         {children}
       </button>
@@ -16,7 +20,11 @@ const Button = ({ children, type, onClick, classes }) => {
     <button
       onClick={onClick}
       type="button"
-      className={`text-sm tablet:text-base p-1 laptop:p-2 m-1 laptop:m-2 rounded-lg flex items-center transition-all ease-out duration-300 hover:bg-slate-100 hover:scale-105 active:scale-100  tablet:first:ml-0 ${classes}`}
+      className={`text-sm tablet:text-base p-1 laptop:p-2 m-1 laptop:m-2 rounded-lg flex items-center transition-all ease-out duration-300 ${
+        theme === "dark"
+          ? "hover:bg-slate-600 text-white"
+          : "hover:bg-slate-100"
+      } hover:scale-105 active:scale-100  tablet:first:ml-0 ${classes}`}
     >
       {children}
     </button>

diff --git a/components/Footer/index.js b/components/Footer/index.js
@@ -2,23 +2,23 @@ import React from "react";
 import Socials from "../Socials";
 import Link from "next/link";
 
-const Footer = () => {
-    return (
-        <>
-            <div className="mt-5 laptop:mt-40 p-2 laptop:p-0">
-                <h1 className="text-2xl text-bold">Contact.</h1>
-                <div className="mt-5">
-                    <Socials />
-                </div>
-            </div>
-            <h1 className="text-sm text-bold mt-2 laptop:mt-10 p-2 laptop:p-0">
-                Made With ❤ by{" "}
-                <Link href="http://www.chetanverma.com">
-                    <a className="underline underline-offset-1">Chetan Verma</a>
-                </Link>
-            </h1>
-        </>
-    );
+const Footer = ({ dark }) => {
+  return (
+    <>
+      <div className="mt-5 laptop:mt-40 p-2 laptop:p-0">
+        <h1 className="text-2xl text-bold">Contact.</h1>
+        <div className="mt-5">
+          <Socials />
+        </div>
+      </div>
+      <h1 className="text-sm text-bold mt-2 laptop:mt-10 p-2 laptop:p-0">
+        Made With ❤ by{" "}
+        <Link href="http://www.chetanverma.com">
+          <a className="underline underline-offset-1">Chetan Verma</a>
+        </Link>
+      </h1>
+    </>
+  );
 };
 
 export default Footer;