Merge pull request #42 from vishnukothakapu/feature/dark-mode

paramsiddharth · web-flow · commit 38b17e4c07b4 · 2025-10-27T18:54:12.000+05:30
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -16,6 +16,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
     "next": "15.5.4",
+    "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tailwind-merge": "^3.3.1"
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Poppins, JetBrains_Mono } from "next/font/google";
+import { ThemeProvider } from "@/components/ThemeProvider";
 import "./globals.css";
 
 const poppins = Poppins({
@@ -28,11 +29,18 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en">
+		<html lang="en" suppressHydrationWarning>
 			<body
 				className={`font-sans ${poppins.variable} ${jetbrainsMono.variable} antialiased`}
 			>
-				{children}
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="system"
+					enableSystem
+					disableTransitionOnChange
+				>
+					{children}
+				</ThemeProvider>
 			</body>
 		</html>
 	);
diff --git a/docs/src/components/HeroSection.tsx b/docs/src/components/HeroSection.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "@/components/ThemeToggle";
 import {
 	Github,
 	ArrowRight,
@@ -37,6 +38,9 @@ export default function HeroSection({ onGetStartedClick }: HeroSectionProps) {
 					కార
 				</div>
 			</div>
+				<div className="absolute top-4 right-4">
+					<ThemeToggle />
+				</div>
 			<div className="container relative mx-auto px-4">
 				<div className="mx-auto max-w-6xl">
 					{/* Top badges */}
diff --git a/docs/src/components/ThemeProvider.tsx b/docs/src/components/ThemeProvider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+	children,
+	...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/docs/src/components/ThemeToggle.tsx b/docs/src/components/ThemeToggle.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+	const { setTheme, theme } = useTheme();
+
+	return (
+		<Button
+			variant="outline"
+			size="icon"
+			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+		>
+			<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+			<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+			<span className="sr-only">Toggle theme</span>
+		</Button>
+	);
+}
diff --git a/package-lock.json b/package-lock.json
