Merge pull request #4 from Rodney1988/main

feat: add basic dark theme

src/components/Card.jsx

@@ -7,7 +7,9 @@ export function Card({ link, title, desc }) {
 
       <div className="relative flex h-full transform rounded-lg items-end border-2 border-transparent bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-xl">
         <div className="p-4 !pt-0 transition-opacity group-hover:absolute group-hover:opacity-0 sm:p-6 lg:p-8 text-center absolute top-0 left-0 w-full h-full flex items-center justify-center text-white">
-          <h2 className="mt-4 text-2xl font-bold sm:text-3xl">{title}</h2>
+          <h2 className="mt-4 text-2xl font-bold sm:text-3xl dark:text-gray-200">
+            {title}
+          </h2>
         </div>
 
         <div className="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8 text-white">

src/components/DarkModeToggle.jsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from "react";
+
+export function DarkModeToggle() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // On component mount, check if the user has a preferred theme stored in localStorage
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme === "dark") {
+      // Apply dark mode if it's the preferred theme
+      document.documentElement.classList.add("dark");
+      setIsDarkMode(true);
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    // Toggle between dark and light mode
+    if (isDarkMode) {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    } else {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    }
+    setIsDarkMode(!isDarkMode); // Update state
+  };
+
+  // Tailwind classes for the toggle switch
+  const labelBaseClasses =
+    "block relative w-[50px] h-[20px] rounded-[10px] cursor-pointer transition-all duration-300";
+  const lightModeBackground = "bg-[#ebebeb]";
+  const darkModeBackground = "bg-[#242424]";
+  const labelShadow =
+    "shadow-[inset_0px_5px_15px_rgba(0,0,0,0.4),_inset_0px_-5px_15px_rgba(255,255,255,0.4)]";
+
+  // Tailwind classes for the toggle button (inner circle)
+  const buttonBaseClasses =
+    "absolute top-0 w-[20px] h-[20px] rounded-[18px] transition-all duration-300 shadow-[0px_5px_10px_rgba(0,0,0,0.2)]";
+  const lightModeButtonBackground =
+    "bg-gradient-to-b from-[#ffcc89] to-[#d8860b]";
+  const darkModeButtonBackground = "bg-gradient-to-b from-[#777] to-[#3a3a3a]";
+  const darkModePosition = "left-[30px]";
+  const lightModePosition = "left-0";
+
+  return (
+    <div id="dark-mode-toggle">
+      {/* Hidden checkbox input element to control the toggle state */}
+      <input
+        type="checkbox"
+        id="darkmode-toggle-checkbox"
+        className="w-0 h-0 hidden" // Hide the checkbox, purely for accessibility
+        onChange={toggleDarkMode}
+        checked={isDarkMode} // Bind the checkbox state to dark mode
+      />
+
+      {/* The visual representation of the toggle */}
+      <label
+        htmlFor="darkmode-toggle-checkbox"
+        className={`${labelBaseClasses} ${isDarkMode ? darkModeBackground : lightModeBackground} ${labelShadow}`}
+      >
+        {/* The inner button (circle) that moves based on the dark mode state */}
+        <span
+          className={`${buttonBaseClasses} ${isDarkMode ? darkModePosition : lightModePosition} ${isDarkMode ? darkModeButtonBackground : lightModeButtonBackground}`}
+        ></span>
+      </label>
+    </div>
+  );
+}

src/components/HomeNav.jsx

@@ -1,14 +1,16 @@
 import Link from "next/link";
+import { DarkModeToggle } from "./DarkModeToggle";
 
 export function HomeNav() {
   return (
-    <nav className="bg-blue-500 p-4 h-[50px] ">
+    <nav className="bg-blue-500 p-4 h-[50px] flex items-center justify-between dark:bg-gray-900">
       <Link
         href={"/"}
-        className="text-white text-2xl font-bold hover:backdrop-blur"
+        className="text-white text-2xl font-bold hover:backdrop-blur dark:text-gray-200"
       >
         Gemini Tools
       </Link>
+      <DarkModeToggle />
     </nav>
   );
 }

src/pages/_document.js

@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="dark:bg-gray-700">
         <Main />
         <NextScript />
       </body>

src/pages/writing/index.jsx

@@ -49,7 +49,7 @@ export default function App() {
       <HomeNav />
       <section className=" bg-slate-400/30 m-10 p-5 rounded-lg h-full-container overflow-auto relative">
         {response ? (
-          <section className=" w-[90%] left-0 mx-[5%] bg-slate-100 p-5 rounded-lg text-lg lg:h-[80%] overflow-auto mb-2 ">
+          <section className=" w-[90%] left-0 mx-[5%] bg-slate-100 p-5 rounded-lg text-lg lg:h-[80%] overflow-auto mb-2">
             <iframe
               className="w-full h-full bg-transperant"
               title="Parsed Markdown"
@@ -59,15 +59,15 @@ export default function App() {
             />
           </section>
         ) : !loader ? (
-          <div className=" w-full h-content flex  items-center justify-center max-h-[50%] lg:max-h-[80%]  h-full">
+          <div className=" w-full h-content flex  items-center justify-center max-h-[50%] lg:max-h-[80%] h-full">
             <div>
               <Image
                 src={"/gimini.png"}
                 width={400}
                 height={0}
                 className="lg:block hidden"
               ></Image>
-              <p className="text-2xl text-center font-bold">
+              <p className="text-2xl text-center font-bold dark:text-gray-400">
                 Please choose a topic
               </p>
             </div>
@@ -79,7 +79,7 @@ export default function App() {
         )}
         <div className="lg:absolute bottom-[2%] w-[90%] left-0 mx-[5%] bg-slate-400 p-5 rounded-lg text-lg  lg:flex lg:justify-evenly lg:h-[100px] lg:items-center">
           <select
-            className="bg-white cursor-pointer text-black rounded-md h-full p-2 w-full lg:w-1/4"
+            className="bg-white cursor-pointer text-black rounded-md h-full p-2 w-full lg:w-1/4 dark:bg-gray-300"
             value={prompt.type}
             onChange={(e) => {
               setPrompt({ ...prompt, type: e.target.value });
@@ -97,15 +97,15 @@ export default function App() {
           <br></br>
           <input
             disabled={prompt.type == 1}
-            className="bg-white my-5 lg:my-0 text-black rounded-md h-full p-2 w-full lg:w-2/4 disabled:bg-slate-200"
+            className="bg-white my-5 lg:my-0 text-black rounded-md h-full p-2 w-full lg:w-2/4 disabled:bg-slate-200 dark:bg-gray-300"
             value={prompt.topic}
             placeholder="Type the topic"
             onChange={(e) => {
               setPrompt({ ...prompt, topic: e.target.value });
             }}
           />
           <button
-            className="lg:w-1/5 w-full btn-grad rounded-lg disabled:cursor-auto disabled:shadow-none h-full "
+            className="lg:w-1/5 w-full btn-grad rounded-lg disabled:cursor-auto disabled:shadow-none h-full dark:text-gray-200 dark:bg-red-700"
             onClick={generate}
             disabled={prompt.topic == ""}
           >

src/styles/globals.css

@@ -32,3 +32,13 @@
   color: #fff;
   text-decoration: none;
 }
+
+.dark .btn-grad {
+  background-image: linear-gradient(
+    to right,
+    #1f2937 0%,
+    /* Dark mode start color */ #374151 51%,
+    /* Dark mode middle color */ #1f2937 100% /* Dark mode end color */
+  );
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Darker shadow for dark mode */
+}

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",