Merge pull request #19 from dev-tahir/dark

dark mode added

Author: dev-tahir

app/components/ChatInterface.tsx

@@ -1,9 +1,10 @@
 'use client';
 import { useState, useEffect, useRef } from 'react';
-import { Send, Bot, User, Trash2, MessageCircle, LogOut, Settings } from 'lucide-react';
+import { Send, Bot, User, Trash2, MessageCircle, LogOut, Settings, Sun, Moon } from 'lucide-react';
 import { signOut, useSession } from 'next-auth/react';
 
 import { useRouter } from 'next/navigation'
+import DarkModeToggle from './DarkModeToggle'; // Import DarkModeToggle
 const router = useRouter();
 
 interface Message {
@@ -124,10 +125,10 @@ export default function ChatInterface() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-100">
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 text-gray-900 dark:text-gray-100">
       <div className="container mx-auto max-w-4xl h-screen flex flex-col">
         {/* Header */}
-        <div className="bg-white/80 backdrop-blur-sm border-b border-gray-200 p-4 sticky top-0 z-10">
+        <div className="bg-white/80 backdrop-blur-sm border-b border-gray-200 p-4 sticky top-0 z-10 dark:bg-gray-800/80 dark:border-gray-700">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
               <div className="w-10 h-10 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
@@ -137,7 +138,7 @@ export default function ChatInterface() {
                 <h1 className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
                   Gemini AI Assistant 2
                 </h1>
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-gray-500 dark:text-gray-400">
                   Welcome, {session?.user?.name}!
                 </p>
               </div>
@@ -148,15 +149,15 @@ export default function ChatInterface() {
                 <>
                   <button
                     onClick={clearChat}
-                    className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors duration-200"
+                    className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:text-red-400 dark:hover:bg-gray-700"
                     title="Clear chat history"
                   >
                     <Trash2 className="w-4 h-4" />
                     <span className="hidden sm:inline">Clear</span>
                   </button>
                   <button
                     onClick={() => router.push('/conversations')}
-                    className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200"
+                    className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:text-blue-400 dark:hover:bg-gray-700"
                     title="Recent Conversations"
                   >
                     <MessageCircle className="w-4 h-4" />
@@ -166,12 +167,13 @@ export default function ChatInterface() {
               )}
               <button
                 onClick={() => router.push('/settings')}
-                className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors duration-200"
+                className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:text-purple-400 dark:hover:bg-gray-700"
                 title="Settings"
               >
                 <Settings className="w-4 h-4" />
                 <span className="hidden sm:inline">Settings</span>
               </button>
+              <DarkModeToggle /> {/* Add DarkModeToggle component here */}
               <div className="flex items-center space-x-2">
                 {session?.user?.image && (
                   <img
@@ -182,7 +184,7 @@ export default function ChatInterface() {
                 )}
                 <button
                   onClick={handleSignOut}
-                  className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors duration-200"
+                  className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:text-red-400 dark:hover:bg-gray-700"
                   title="Sign out"
                 >
                   <LogOut className="w-4 h-4" />
@@ -200,11 +202,11 @@ export default function ChatInterface() {
               <div className="w-20 h-20 bg-gradient-to-r from-purple-400 to-blue-400 rounded-full flex items-center justify-center mb-4">
                 <MessageCircle className="w-10 h-10 text-white" />
               </div>
-              <h2 className="text-2xl font-semibold text-gray-700 mb-2">
+              <h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
                 Welcome back, {session?.user?.name?.split(' ')[0]}!
               </h2>
-              <p className="text-gray-500 max-w-md">
-                Start a conversation with me! I can help with questions, creative writing, 
+              <p className="text-gray-500 dark:text-gray-400 max-w-md">
+                Start a conversation with me! I can help with questions, creative writing,
                 problem-solving, and much more. Your chat history is saved securely.
               </p>
             </div>
@@ -241,20 +243,20 @@ export default function ChatInterface() {
                     <Bot className="w-4 h-4 text-white" />
                   )}
                 </div>
-
+ 
                 <div
                   className={`px-4 py-3 rounded-2xl shadow-sm ${
                     message.role === 'user'
                       ? 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white'
-                      : 'bg-white border border-gray-200 text-gray-800'
+                      : 'bg-white border border-gray-200 text-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100'
                   }`}
                 >
                   <div className="whitespace-pre-wrap text-sm leading-relaxed">
                     {message.content}
                   </div>
                   <div
                     className={`text-xs mt-2 ${
-                      message.role === 'user' ? 'text-blue-100' : 'text-gray-400'
+                      message.role === 'user' ? 'text-blue-100' : 'text-gray-400 dark:text-gray-300'
                     }`}
                   >
                     {formatTime(message.timestamp)}
@@ -270,14 +272,14 @@ export default function ChatInterface() {
                 <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center flex-shrink-0">
                   <Bot className="w-4 h-4 text-white" />
                 </div>
-                <div className="px-4 py-3 rounded-2xl bg-white border border-gray-200">
+                <div className="px-4 py-3 rounded-2xl bg-white border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
                   <div className="flex items-center space-x-2">
                     <div className="flex space-x-1">
                       <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                       <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
                       <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
                     </div>
-                    <span className="text-sm text-gray-500">AI is thinking...</span>
+                    <span className="text-sm text-gray-500 dark:text-gray-300">AI is thinking...</span>
                   </div>
                 </div>
               </div>
@@ -288,7 +290,7 @@ export default function ChatInterface() {
         </div>
 
         {/* Input Form */}
-        <div className="bg-white/80 backdrop-blur-sm border-t border-gray-200 p-4">
+        <div className="bg-white/80 backdrop-blur-sm border-t border-gray-200 p-4 dark:bg-gray-800/80 dark:border-gray-700">
           <form onSubmit={sendMessage} className="flex items-center space-x-4">
             <div className="flex-1 relative">
               <input
@@ -297,12 +299,12 @@ export default function ChatInterface() {
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 placeholder="Type your message..."
-                className="w-full px-4 py-3 pr-12 rounded-full border text-black border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white shadow-sm"
+                className="w-full px-4 py-3 pr-12 rounded-full border text-black border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white shadow-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400"
                 disabled={loading}
                 autoFocus
               />
               <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                <div className="text-xs text-gray-400">
+                <div className="text-xs text-gray-400 dark:text-gray-300">
                   {input.length}/1000
                 </div>
               </div>
@@ -318,7 +320,7 @@ export default function ChatInterface() {
           </form>
 
           <div className="text-center mt-2">
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               Your chat history is saved securely. Press Enter to send.
             </p>
           </div>

app/components/DarkModeToggle.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useState, useEffect } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+export default function DarkModeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors duration-200 dark:text-gray-300 dark:hover:text-purple-300 dark:hover:bg-gray-700"
+      title="Toggle dark mode"
+    >
+      {theme === 'dark' ? (
+        <Sun className="w-4 h-4" />
+      ) : (
+        <Moon className="w-4 h-4" />
+      )}
+      <span className="hidden sm:inline">
+        {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+      </span>
+    </button>
+  );
+}

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import { AuthProvider } from './providers'
+import { ThemeProvider } from 'next-themes'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -18,9 +19,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <AuthProvider>
-          {children}
-        </AuthProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
       </body>
     </html>
   )

package-lock.json

@@ -16,6 +16,7 @@
     "mysql2": "^3.14.1",
     "next": "15.3.4",
     "next-auth": "^4.24.11",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package.json

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class', // Enable dark mode based on the 'class' strategy
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}