Adding Dark mode / Light mode Toggle button

client/src/app/globals.css

@@ -2,27 +2,109 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+    --background-start: 255 255 255;
+    --background-end: 245 245 245;
+  }
 
-/* :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --background-start: 15 23 42;
+    --background-end: 30 41 59;
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply min-h-screen bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-} */
+/* Smooth transitions */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.5s;
+}
+
+/* Base transitions */
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+/* Theme transition */
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-secondary;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-primary/50 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-primary/70;
+}
+
+/* Focus styles */
+:focus-visible {
+  @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
+}
+
+/* Selection styles */
+::selection {
+  @apply bg-primary/30 text-foreground;
+}

client/src/app/layout.js

@@ -1,48 +1,63 @@
+"use client"
 import { Inter } from 'next/font/google'
 import './globals.css'
 import MyContextProvider from '@/context/SocketProvider'
-import Header from '@/components/Header';
-import Footer from "@/components/Footer";
-import { ClerkProvider } from '@clerk/nextjs';
+import Header from '@/components/Header'
+import Footer from "@/components/Footer"
+import { ClerkProvider } from '@clerk/nextjs'
+import { ThemeProvider } from 'next-themes'
 
 const inter = Inter({ subsets: ['latin'] })
 
+// Metadata moved outside of client component
 export const metadata = {
   title: 'Video Calling WebApp',
   description: 'Soumojit Shome Video Calling WebApp',
-};
+}
 
 export default function RootLayout({ children }) {
-  const baseUrl = process.env.NEXT_PUBLIC_FALLBACK_URL || 'https://soumojit-nextjs-videocall-webapp.vercel.app/';
+  const baseUrl = process.env.NEXT_PUBLIC_FALLBACK_URL || 'https://soumojit-nextjs-videocall-webapp.vercel.app/'
 
   return (
     <ClerkProvider>
-    <html lang="en">
-      <head>
-        <title>{metadata.title}</title>
-        <meta name="description" content={metadata.description} />
-        <meta
-          name="keywords"
-          content="Video calling, WebRTC, Communication app, Video conferencing, Soumojit Shome"
-        />
-        <meta property="og:title" content="Video Calling WebApp" />
-        <meta
-          property="og:description"
-          content="A web application for seamless video calls built by Soumojit Shome."
-        />
-        <meta property="og:image" content="/images/social-share-image.png" />
-        <meta property="og:url" content={baseUrl} />
-        <meta property="og:type" content="website" />
-        <meta name="robots" content="index, follow" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </head>
-      <body className={inter.className}>
-        <Header />
-        <MyContextProvider>{children}</MyContextProvider>
-        <Footer />
-      </body>
-    </html>
+      <html lang="en" suppressHydrationWarning>
+        <head>
+          <title>{metadata.title}</title>
+          <meta name="description" content={metadata.description} />
+          <meta
+            name="keywords"
+            content="Video calling, WebRTC, Communication app, Video conferencing, Soumojit Shome"
+          />
+          <meta property="og:title" content="Video Calling WebApp" />
+          <meta
+            property="og:description"
+            content="A web application for seamless video calls built by Soumojit Shome."
+          />
+          <meta property="og:image" content="/images/social-share-image.png" />
+          <meta property="og:url" content={baseUrl} />
+          <meta property="og:type" content="website" />
+          <meta name="robots" content="index, follow" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta name="color-scheme" content="light dark" />
+          <link rel="icon" href="/favicon.ico" />
+        </head>
+        <body className={`${inter.className} antialiased`}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem={true}
+            disableTransitionOnChange={false}
+          >
+            <div className="min-h-screen bg-gradient-to-b from-background-start to-background-end">
+              <Header />
+              <main className="pt-16">
+                <MyContextProvider>{children}</MyContextProvider>
+              </main>
+              <Footer />
+            </div>
+          </ThemeProvider>
+        </body>
+      </html>
     </ClerkProvider>
-  );
-}
+  )
+}

client/src/components/Header.css

@@ -1,71 +1,92 @@
 .header {
-  background: linear-gradient(#0d1a3b,#132b67);
-  padding: 1rem;
-  color: #fff;
-  z-index: 1;
-  position: relative;
+  @apply fixed top-0 left-0 right-0 z-50 px-4 py-2;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(8px);
+}
+
+.header.dark {
+  background: rgba(15, 23, 42, 0.8);
 }
 
 .nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  @apply max-w-7xl mx-auto flex items-center justify-between;
 }
 
 .logo {
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-decoration: none;
-  color: #fff;
-  cursor: default;
+  @apply text-xl font-bold text-blue-600 dark:text-blue-400;
 }
 
 .navLinks {
-  list-style-type: none;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  margin: 0;
-  padding: 0;
-  width: 40%;
-  flex-wrap: wrap;
+  @apply hidden md:flex items-center space-x-8;
 }
 
 .navLink {
-  text-decoration: none;
-  color: #fff;
+  @apply text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors duration-200;
+}
+
+/* Updated theme toggle button styles */
+.theme-toggle-btn {
+  padding: 8px;
+  border-radius: 8px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  @apply text-gray-600 dark:text-gray-300;
+  @apply focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500;
+}
+
+.theme-toggle-btn:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  @apply dark:bg-white/10;
 }
 
-.navLink:hover {
-  color: #007bff;
+.theme-toggle-btn svg {
+  @apply w-5 h-5 transition-transform duration-200;
 }
 
-.buttonContainer {
+.theme-toggle-btn:hover svg {
+  @apply rotate-12;
+}
+
+/* Layout utilities */
+.flex {
   display: flex;
-  align-items: center;
 }
 
-.button {
-  padding: 0.5rem 1rem;
-  background-color: #007bff;
-  color: #fff;
-  text-decoration: none;
-  border-radius: 20px;
-  transition: background-color 0.3s;
+.items-center {
+  align-items: center;
 }
 
-.button:hover {
-  background-color: #0056b3;
+.gap-4 {
+  gap: 1rem;
 }
 
+/* Mobile navigation styles */
 @media (max-width: 768px) {
-  .nav {
-    flex-direction: column;
-    align-items: center;
+  .navLinks {
+    @apply absolute top-full left-0 right-0 flex-col items-start p-4 space-y-4 bg-white dark:bg-gray-900 border-t dark:border-gray-800;
+    display: none;
   }
 
-  .navLinks {
-    margin: 1rem;
-    width: 80%;
+  .navLinks.active {
+    display: flex;
   }
 }
+
+/* User button wrapper styles */
+.user-button-wrapper {
+  @apply ml-4;
+}
+
+/* Dark mode specific styles */
+[data-theme='dark'] .theme-toggle-btn {
+  color: #fff;
+}
+
+[data-theme='dark'] .theme-toggle-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}