feat(theme): add light mode

app/api/events/route.ts

@@ -14,7 +14,7 @@ export async function POST(req: NextRequest) {
 
         try {
             event = Object.fromEntries(formData.entries());
-        } catch (e) {
+        } catch {
             return NextResponse.json({ message: 'Invalid JSON data format' }, { status: 400 })
         }
 
@@ -46,8 +46,8 @@ export async function POST(req: NextRequest) {
         const tagsStr = formData.get('tags') as string;
         const agendaStr = formData.get('agenda') as string;
 
-        let tags = safeParseJsonArray(tagsStr);
-        let agenda = safeParseJsonArray(agendaStr);
+        const tags = safeParseJsonArray(tagsStr);
+        const agenda = safeParseJsonArray(agendaStr);
 
         const arrayBuffer = await file.arrayBuffer();
         const buffer = Buffer.from(arrayBuffer);
@@ -148,4 +148,4 @@ export async function GET(req: NextRequest) {
     } catch (e) {
         return NextResponse.json({ message: 'Event fetching failed', error: e }, { status: 500 });
     }
-}
+}

app/create-event/page.tsx

@@ -11,7 +11,7 @@ const CreateEventPage = () => {
       Create New Event
     </h1>
 
-    <p className="mt-4 text-gray-400 text-center">
+    <p className="mt-4 text-muted-foreground text-center">
       Submit your hackathon, meetup, or conference.
     </p>
 
@@ -23,4 +23,4 @@ const CreateEventPage = () => {
   );
 };
 
-export default CreateEventPage;
+export default CreateEventPage;

app/error.tsx

@@ -17,11 +17,11 @@ export default function ErrorPage({
   }, [error]);
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-black text-white px-4 text-center">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground px-4 text-center">
       <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
         Something went wrong
       </h1>
-      <p className="text-gray-400 mb-6">
+      <p className="text-muted-foreground mb-6">
         An unexpected error occurred. Please try again.
       </p>
       <div className="flex gap-4">
@@ -33,7 +33,7 @@ export default function ErrorPage({
         </button>
         <Link
           href="/"
-          className="px-6 py-3 rounded-lg border border-gray-600 hover:bg-gray-800 transition"
+          className="px-6 py-3 rounded-lg border border-border hover:bg-accent transition"
         >
           Go home
         </Link>

app/events/page.tsx

@@ -103,7 +103,7 @@ export default async function Page({ searchParams }: PageProps) {
       </div>
 
       {/* SearchFilters uses useSearchParams — must be inside Suspense */}
-      <Suspense fallback={<div className="w-full h-16 animate-pulse rounded-xl bg-white/5" />}>
+      <Suspense fallback={<div className="w-full h-16 animate-pulse rounded-xl bg-muted" />}>
         <SearchFilters />
       </Suspense>
 

app/globals.css

@@ -1,39 +1,37 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
-input[type="date"]::-webkit-calendar-picker-indicator,
-input[type="time"]::-webkit-calendar-picker-indicator {
-  filter: invert(1);
-}
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-  --color-blue: #94eaff;
-  --color-light-100: #e7f2ff;
-  --color-light-200: #bdbdbd;
-  --color-border-dark: #151024;
-  --color-dark-100: #0d161a;
-  --color-dark-200: #182830;
+  color-scheme: light;
+  --font-sans-brand: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono-brand: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  --color-blue: #087f91;
+  --color-light-100: #17262d;
+  --color-light-200: #52666f;
+  --color-border-dark: #d8e2e6;
+  --color-dark-100: #ffffff;
+  --color-dark-200: #eef4f6;
   --radius: 0.625rem;
-  --background: #030708;
-  --foreground: #ffffff;
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: #59deca;
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --background: #f6fafb;
+  --foreground: #102027;
+  --card: #ffffff;
+  --card-foreground: #102027;
+  --popover: #ffffff;
+  --popover-foreground: #102027;
+  --primary: #0f9f91;
+  --primary-foreground: #ffffff;
+  --secondary: #e7f1f3;
+  --secondary-foreground: #183038;
+  --muted: #eaf1f3;
+  --muted-foreground: #52666f;
+  --accent: #dff5f1;
+  --accent-foreground: #075e57;
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --border: #d8e2e6;
+  --input: #cad8dd;
+  --ring: #0f9f91;
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -58,8 +56,8 @@ input[type="time"]::-webkit-calendar-picker-indicator {
   --color-border-dark: var(--color-border-dark);
   --color-dark-100: var(--color-dark-100);
   --color-dark-200: var(--color-dark-200);
-  --font-schibsted-grotesk: var(--font-schibsted-grotesk);
-  --font-martian-mono: var(--font-martian-mono);
+  --font-schibsted-grotesk: var(--font-sans-brand);
+  --font-martian-mono: var(--font-mono-brand);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -100,11 +98,11 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 }
 
 @utility text-gradient {
-  @apply to-blue bg-gradient-to-b from-white via-white bg-clip-text font-semibold text-transparent;
+  @apply to-blue bg-gradient-to-b from-foreground via-foreground bg-clip-text font-semibold text-transparent;
 }
 
 @utility glass {
-  @apply bg-[#12121280]/50 rounded-md bg-clip-padding backdrop-filter backdrop-blur-xl border-b border-border-dark;
+  @apply bg-background/85 rounded-md bg-clip-padding backdrop-filter backdrop-blur-xl border-b border-border-dark;
 }
 
 @utility card-shadow {
@@ -117,7 +115,9 @@ input[type="time"]::-webkit-calendar-picker-indicator {
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply min-h-screen bg-background text-foreground antialiased transition-colors duration-300;
+    font-family: var(--font-sans-brand);
+    background-image: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34rem);
   }
 
   main {
@@ -227,7 +227,7 @@ input[type="time"]::-webkit-calendar-picker-indicator {
       }
 
       .booking {
-        @apply flex-1 w-full p-4 border-l border-gray-700;
+        @apply flex-1 w-full p-4 border-l border-border;
 
         .signup-card {
           @apply bg-dark-100 border-dark-200 card-shadow flex w-full flex-col gap-6 rounded-[10px] border px-5 py-6;
@@ -277,4 +277,38 @@ input[type="time"]::-webkit-calendar-picker-indicator {
       }
     }
   }
-}
+}
+
+.dark {
+  color-scheme: dark;
+  --color-blue: #94eaff;
+  --color-light-100: #e7f2ff;
+  --color-light-200: #bdbdbd;
+  --color-border-dark: #21323a;
+  --color-dark-100: #0d161a;
+  --color-dark-200: #182830;
+  --background: #030708;
+  --foreground: #ffffff;
+  --card: #0d161a;
+  --card-foreground: #f4fbff;
+  --popover: #0d161a;
+  --popover-foreground: #f4fbff;
+  --primary: #59deca;
+  --primary-foreground: #031310;
+  --secondary: #182830;
+  --secondary-foreground: #f4fbff;
+  --muted: #182830;
+  --muted-foreground: #bdbdbd;
+  --accent: #163139;
+  --accent-foreground: #dffcff;
+  --border: #21323a;
+  --input: #2b3e47;
+  --ring: #59deca;
+  --sidebar: #0d161a;
+  --sidebar-foreground: #f4fbff;
+}
+
+.dark input[type="date"]::-webkit-calendar-picker-indicator,
+.dark input[type="time"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}

app/layout.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { Schibsted_Grotesk, Martian_Mono } from "next/font/google";
 import { Suspense } from "react";
 import "./globals.css";
 import LightRays from "../components/LightRays";
@@ -8,17 +7,17 @@ import { PostHogProvider } from "./providers";
 import { Toaster } from "sonner";
 import BackToTop from '../components/BackToTop';
 
-
-const SchibstedGrotesk = Schibsted_Grotesk({
-  variable: "--font-schibsted-grotesk",
-  subsets: ["latin"],
-});
-
-const MartianMono = Martian_Mono({
-  variable: "--font-martian-mono",
-  subsets: ["latin"],
-});
-
+const themeScript = `
+  try {
+    const savedTheme = localStorage.getItem('devevent-theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = savedTheme === 'light' || savedTheme === 'dark'
+      ? savedTheme
+      : (prefersDark ? 'dark' : 'light');
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.dataset.theme = theme;
+  } catch (_) {}
+`;
 export const metadata: Metadata = {
   title: "DevEvent",
   description: "The Hub for Every Dev Event that you Mustn't Miss",
@@ -31,9 +30,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${SchibstedGrotesk.variable} ${MartianMono.variable} antialiased`}
-      >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>
         <Toaster richColors position="top-right" />
         <Suspense fallback={null}>
           <PostHogProvider>
@@ -64,4 +64,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}  
+}