From 355abb86c52c0f99020027b1515eff1d44b0cc38 Mon Sep 17 00:00:00 2001
From: ANDEV09 <lamhoangan612@gmail.com>
Date: Sun, 15 Mar 2026 03:57:09 +0700
Subject: [PATCH] feat: add dark mode theme system with smooth transition

---
 package-lock.json                          |  11 ++
 package.json                               |   1 +
 src/app/page.tsx                           |  72 ++++++-----
 src/components/common/theme-provider.tsx   |   8 ++
 src/components/common/theme-toggle.tsx     |  23 ++++
 src/components/common/ui/dropdown-menu.tsx | 138 +++++++++++++++++++++
 src/components/common/ui/index.ts          |  15 ++-
 src/provider/index.tsx                     |  20 ++-
 8 files changed, 250 insertions(+), 38 deletions(-)
 create mode 100644 src/components/common/theme-provider.tsx
 create mode 100644 src/components/common/theme-toggle.tsx
 create mode 100644 src/components/common/ui/dropdown-menu.tsx

diff --git a/package-lock.json b/package-lock.json
index 563fd4d..d4d33c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.554.0",
         "next": "^16.1.6",
+        "next-themes": "^0.4.6",
         "react": "^19.2.3",
         "react-apexcharts": "^1.9.0",
         "react-day-picker": "^9.13.0",
@@ -7235,6 +7236,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 7465e27..763404e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.554.0",
     "next": "^16.1.6",
+    "next-themes": "^0.4.6",
     "react": "^19.2.3",
     "react-apexcharts": "^1.9.0",
     "react-day-picker": "^9.13.0",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ec89aa0..5a9ee4a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,45 +1,49 @@
 import Link from "next/link";
 import Image from "next/image";
 import { Button } from "@/components/common/ui/button";
+import { ThemeToggle } from "@/components/common/theme-toggle";
 
 export default function HomePage(): React.ReactElement {
   return (
-    <div className="min-h-screen bg-linear-to-b from-slate-50 to-white">
+    <div className="min-h-screen bg-linear-to-b from-slate-50 to-white dark:from-gray-950 dark:to-gray-900">
       {/* Header */}
-      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-sm dark:border-gray-800 dark:bg-gray-950/80">
         <div className="mx-auto max-w-7xl px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-linear-to-br from-blue-600 to-indigo-600">
                 <span className="text-lg font-bold text-white">N</span>
               </div>
-              <span className="text-lg font-semibold text-slate-900">
+              <span className="text-lg font-semibold text-slate-900 dark:text-white">
                 NextApp
               </span>
             </div>
             <nav className="hidden gap-8 md:flex">
               <Link
                 href="/"
-                className="text-sm font-medium text-slate-700 hover:text-blue-600"
+                className="text-sm font-medium text-slate-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
               >
                 Trang chủ
               </Link>
               <Link
                 href="/about"
-                className="text-sm font-medium text-slate-700 hover:text-blue-600"
+                className="text-sm font-medium text-slate-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
               >
                 Giới thiệu
               </Link>
               <Link
                 href="/contact"
-                className="text-sm font-medium text-slate-700 hover:text-blue-600"
+                className="text-sm font-medium text-slate-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
               >
                 Liên hệ
               </Link>
             </nav>
-            <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
-              Đăng nhập
-            </Button>
+            <div className="flex items-center gap-3">
+              <ThemeToggle />
+              <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
+                Đăng nhập
+              </Button>
+            </div>
           </div>
         </div>
       </header>
@@ -48,21 +52,21 @@ export default function HomePage(): React.ReactElement {
       <section className="mx-auto max-w-7xl px-6 py-20 md:py-32">
         <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
           <div className="flex flex-col justify-center">
-            <div className="mb-4 inline-flex w-fit items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700">
+            <div className="mb-4 inline-flex w-fit items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 dark:bg-blue-950 dark:text-blue-300">
               <span className="relative flex h-2 w-2">
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75"></span>
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
               </span>
               Mới ra mắt
             </div>
-            <h1 className="mb-6 text-5xl font-bold leading-tight text-slate-900 md:text-6xl">
+            <h1 className="mb-6 text-5xl font-bold leading-tight text-slate-900 dark:text-white md:text-6xl">
               Xây dựng sản phẩm
               <br />
               <span className="bg-linear-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                 nhanh hơn, tốt hơn
               </span>
             </h1>
-            <p className="mb-8 text-lg leading-relaxed text-slate-600">
+            <p className="mb-8 text-lg leading-relaxed text-slate-600 dark:text-gray-400">
               Nền tảng giúp bạn tập trung vào những gì quan trọng nhất. Đơn
               giản, hiệu quả và dễ sử dụng cho mọi dự án.
             </p>
@@ -73,15 +77,15 @@ export default function HomePage(): React.ReactElement {
               <Button
                 variant="outline"
                 size="lg"
-                className="border-slate-600 text-slate-600"
+                className="border-slate-600 text-slate-600 dark:border-gray-600 dark:text-gray-300"
               >
                 Xem demo
               </Button>
             </div>
           </div>
           <div className="relative">
-            <div className="absolute -inset-4 rounded-3xl bg-linear-to-r from-blue-100 to-indigo-100 opacity-50 blur-2xl" />
-            <div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl">
+            <div className="absolute -inset-4 rounded-3xl bg-linear-to-r from-blue-100 to-indigo-100 opacity-50 blur-2xl dark:from-blue-900 dark:to-indigo-900" />
+            <div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
               <Image
                 src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop"
                 alt="Dashboard preview"
@@ -96,13 +100,15 @@ export default function HomePage(): React.ReactElement {
       </section>
 
       {/* Features */}
-      <section className="border-y border-slate-200 bg-white py-20 md:py-24">
+      <section className="border-y border-slate-200 bg-white py-20 md:py-24 dark:border-gray-800 dark:bg-gray-900">
         <div className="mx-auto max-w-7xl px-6">
           <div className="mb-16 text-center">
-            <h2 className="mb-4 text-3xl font-bold text-slate-900 md:text-4xl">
+            <h2 className="mb-4 text-3xl font-bold text-slate-900 md:text-4xl dark:text-white">
               Tính năng nổi bật
             </h2>
-            <p className="text-lg text-slate-600">Mọi thứ bạn cần để bắt đầu</p>
+            <p className="text-lg text-slate-600 dark:text-gray-400">
+              Mọi thứ bạn cần để bắt đầu
+            </p>
           </div>
           <div className="grid gap-8 md:grid-cols-3">
             {[
@@ -127,17 +133,19 @@ export default function HomePage(): React.ReactElement {
             ].map((feature, i) => (
               <div
                 key={i}
-                className="group rounded-2xl border border-slate-200 bg-linear-to-br from-slate-50 to-white p-8 transition-all hover:border-slate-300 hover:shadow-lg"
+                className="group rounded-2xl border border-slate-200 bg-linear-to-br from-slate-50 to-white p-8 transition-all hover:border-slate-300 hover:shadow-lg dark:border-gray-700 dark:from-gray-800 dark:to-gray-900 dark:hover:border-gray-600"
               >
                 <div
                   className={`mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br ${feature.color} text-3xl shadow-lg`}
                 >
                   {feature.icon}
                 </div>
-                <h3 className="mb-3 text-xl font-semibold text-slate-900">
+                <h3 className="mb-3 text-xl font-semibold text-slate-900 dark:text-white">
                   {feature.title}
                 </h3>
-                <p className="text-slate-600">{feature.desc}</p>
+                <p className="text-slate-600 dark:text-gray-400">
+                  {feature.desc}
+                </p>
               </div>
             ))}
           </div>
@@ -155,13 +163,15 @@ export default function HomePage(): React.ReactElement {
             ].map((stat, i) => (
               <div
                 key={i}
-                className="rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm"
+                className="rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800"
               >
                 <div className="mb-3 text-4xl">{stat.icon}</div>
-                <div className="mb-2 text-4xl font-bold text-slate-900">
+                <div className="mb-2 text-4xl font-bold text-slate-900 dark:text-white">
                   {stat.value}
                 </div>
-                <div className="text-slate-600">{stat.label}</div>
+                <div className="text-slate-600 dark:text-gray-400">
+                  {stat.label}
+                </div>
               </div>
             ))}
           </div>
@@ -169,7 +179,7 @@ export default function HomePage(): React.ReactElement {
       </section>
 
       {/* CTA */}
-      <section className="border-y border-slate-200 bg-linear-to-br from-blue-600 to-indigo-600 py-20 md:py-24">
+      <section className="border-y border-slate-200 bg-linear-to-br from-blue-600 to-indigo-600 py-20 md:py-24 dark:border-gray-800">
         <div className="mx-auto max-w-3xl px-6 text-center">
           <h2 className="mb-4 text-3xl font-bold text-white md:text-4xl">
             Sẵn sàng bắt đầu?
@@ -185,7 +195,7 @@ export default function HomePage(): React.ReactElement {
       </section>
 
       {/* Footer */}
-      <footer className="border-t border-slate-200 bg-slate-50 py-12">
+      <footer className="border-t border-slate-200 bg-slate-50 py-12 dark:border-gray-800 dark:bg-gray-900">
         <div className="mx-auto max-w-7xl px-6">
           <div className="grid gap-8 md:grid-cols-4">
             <div>
@@ -193,11 +203,11 @@ export default function HomePage(): React.ReactElement {
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-linear-to-br from-blue-600 to-indigo-600">
                   <span className="text-sm font-bold text-white">N</span>
                 </div>
-                <span className="text-lg font-semibold text-slate-900">
+                <span className="text-lg font-semibold text-slate-900 dark:text-white">
                   NextApp
                 </span>
               </div>
-              <p className="text-sm text-slate-600">
+              <p className="text-sm text-slate-600 dark:text-gray-400">
                 Xây dựng sản phẩm tốt hơn mỗi ngày
               </p>
             </div>
@@ -210,7 +220,7 @@ export default function HomePage(): React.ReactElement {
               { title: "Hỗ trợ", links: ["Trợ giúp", "Liên hệ", "Điều khoản"] },
             ].map((col, i) => (
               <div key={i}>
-                <div className="mb-4 text-sm font-semibold text-slate-900">
+                <div className="mb-4 text-sm font-semibold text-slate-900 dark:text-white">
                   {col.title}
                 </div>
                 <ul className="space-y-2">
@@ -218,7 +228,7 @@ export default function HomePage(): React.ReactElement {
                     <li key={j}>
                       <Link
                         href="/"
-                        className="text-sm text-slate-600 hover:text-blue-600"
+                        className="text-sm text-slate-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
                       >
                         {link}
                       </Link>
@@ -228,7 +238,7 @@ export default function HomePage(): React.ReactElement {
               </div>
             ))}
           </div>
-          <div className="mt-12 border-t border-slate-200 pt-8 text-center text-sm text-slate-600">
+          <div className="mt-12 border-t border-slate-200 pt-8 text-center text-sm text-slate-600 dark:border-gray-800 dark:text-gray-400">
             © 2024 NextApp. All rights reserved.
           </div>
         </div>
diff --git a/src/components/common/theme-provider.tsx b/src/components/common/theme-provider.tsx
new file mode 100644
index 0000000..c6a9021
--- /dev/null
+++ b/src/components/common/theme-provider.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/src/components/common/theme-toggle.tsx b/src/components/common/theme-toggle.tsx
new file mode 100644
index 0000000..7e4af17
--- /dev/null
+++ b/src/components/common/theme-toggle.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Sun, Moon } from "lucide-react";
+import { useMounted } from "@/hooks";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useMounted();
+
+  const isDark = mounted && resolvedTheme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="relative flex items-center justify-center rounded-full h-11 w-11 border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 cursor-pointer"
+      aria-label="Toggle theme"
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </button>
+  );
+}
diff --git a/src/components/common/ui/dropdown-menu.tsx b/src/components/common/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..dcd6d06
--- /dev/null
+++ b/src/components/common/ui/dropdown-menu.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/cn";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <svg
+          width="15"
+          height="15"
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3354 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.5553 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          />
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+};
diff --git a/src/components/common/ui/index.ts b/src/components/common/ui/index.ts
index fa5f764..a59d29b 100644
--- a/src/components/common/ui/index.ts
+++ b/src/components/common/ui/index.ts
@@ -1,2 +1,15 @@
 // Barrel export for UI components
-export { Button } from './button';
+export { Button } from "./button";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+} from "./dropdown-menu";
diff --git a/src/provider/index.tsx b/src/provider/index.tsx
index 313e5dd..afe3891 100644
--- a/src/provider/index.tsx
+++ b/src/provider/index.tsx
@@ -3,6 +3,7 @@
 import { ReactNode } from "react";
 import QueryProvider from "@/provider/QueryProvider";
 import { SidebarProvider } from "@/contexts/SidebarContext";
+import { ThemeProvider } from "@/components/common/theme-provider";
 import { Toaster } from "sonner";
 
 interface ProvidersProps {
@@ -11,11 +12,18 @@ interface ProvidersProps {
 
 export default function Providers({ children }: ProvidersProps) {
   return (
-    <QueryProvider>
-      <SidebarProvider>
-        {children}
-        <Toaster position="top-right" />
-      </SidebarProvider>
-    </QueryProvider>
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <QueryProvider>
+        <SidebarProvider>
+          {children}
+          <Toaster position="top-right" />
+        </SidebarProvider>
+      </QueryProvider>
+    </ThemeProvider>
   );
 }