rishabh3562 · rishabh3562 · Oct 27, 2025 · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/.github/workflows/ci-cd-pipeline.yml b/.github/workflows/ci-cd-pipeline.yml
@@ -321,6 +321,9 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'npm'
 
+      - name: Install dependencies
+        run: npm ci --prefer-offline
+
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 

diff --git a/app/globals.css b/app/globals.css
@@ -2,20 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@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 {
   :root {
     --background: 0 0% 100%;
@@ -44,6 +30,7 @@
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
   }
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -108,7 +95,7 @@
 }
 
 .prose pre {
-  background-color: rgb(var(--muted));
+  background-color: hsl(var(--muted));
   padding: 1rem;
   border-radius: 0.5rem;
 }
@@ -120,12 +107,12 @@
 
 .prose th,
 .prose td {
-  border: 1px solid rgb(var(--border));
+  border: 1px solid hsl(var(--border));
   padding: 0.5rem;
 }
 
 .prose blockquote {
-  border-left: 4px solid rgb(var(--primary));
+  border-left: 4px solid hsl(var(--primary));
   padding-left: 1rem;
   font-style: italic;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { SiteHeader } from "@/components/site-header";
 import { SiteFooter } from "@/components/site-footer";
+import { ThemeProvider } from "next-themes";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,13 +19,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        <div className="relative min-h-screen flex flex-col">
-          <SiteHeader />
-          <main className="flex-1">{children}</main>
-          <SiteFooter />
-        </div>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          storageKey="devtools-theme"
+          disableTransitionOnChange
+        >
+          <div className="relative min-h-screen flex flex-col">
+            <SiteHeader />
+            <main className="flex-1">{children}</main>
+            <SiteFooter />
+          </div>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -75,7 +75,7 @@ export default function Home() {
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
               </Link>
-              <Link href="https://github.com" target="_blank">
+              <Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
                 <Button size="lg" variant="outline" className="h-12 px-6">
                   View on GitHub
                 </Button>

diff --git a/components/site-footer.tsx b/components/site-footer.tsx
@@ -13,7 +13,7 @@ export function SiteFooter() {
             </Link>
             . The source code is available on{" "}
             <Link
-              href="https://github.com"
+              href="https://github.com/rishabh3562/ToolBox"
               target="_blank"
               className="font-medium underline underline-offset-4"
             >
@@ -23,7 +23,7 @@ export function SiteFooter() {
           </p>
         </div>
         <div className="flex items-center space-x-4">
-          <Link href="https://github.com" target="_blank">
+          <Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
             <Github className="h-5 w-5" />
           </Link>
           <Link href="https://twitter.com" target="_blank">

diff --git a/components/site-header.tsx b/components/site-header.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Wrench, Github } from "lucide-react";
+import { ThemeToggle } from "./theme-toggle";
 
 const navigation = [
   { name: "Home", href: "/" },
@@ -40,8 +41,9 @@ export function SiteHeader() {
           </nav>
         </div>
         <div className="ml-auto flex items-center space-x-4">
+          <ThemeToggle />
           <Button variant="outline" size="icon" asChild>
-            <Link href="https://github.com" target="_blank">
+            <Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
               <Github className="h-4 w-4" />
             </Link>
           </Button>

diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = React.useState(false);
+  const { resolvedTheme, setTheme } = useTheme(); // Changed: use resolvedTheme
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")} // Changed: use resolvedTheme
+      className="relative inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
+      aria-label="Toggle theme"
+    >
+      <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
diff --git a/package.json b/package.json
@@ -48,6 +48,8 @@
     "@types/node": "20.6.2",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
+    "@upstash/ratelimit": "^1.0.0",
+    "@upstash/redis": "^1.25.1",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -78,9 +80,7 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.2.2",
     "vaul": "^0.9.9",
-    "zod": "^3.23.8",
-    "@upstash/ratelimit": "^1.0.0",
-    "@upstash/redis": "^1.25.1"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/jest": "^29.5.0",