From 10aa93133847f670b09d5498fa4400f2b061a2c3 Mon Sep 17 00:00:00 2001
From: "pr-test1[bot]" <226697212+pr-test1[bot]@users.noreply.github.com>
Date: Fri, 12 Sep 2025 00:43:36 +0000
Subject: [PATCH 1/2] docs: update docs/chat-interface.mdx for changes #19

---
 docs/chat-interface.mdx | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/docs/chat-interface.mdx b/docs/chat-interface.mdx
index b299830..05a83de 100644
--- a/docs/chat-interface.mdx
+++ b/docs/chat-interface.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Chat Interface'
-description: 'Learn about the chat interface component and its features'
+description: 'Learn about the chat interface component, its features and the new dark-mode toggle'
 ---
 
 # Chat Interface
@@ -15,6 +15,7 @@ The chat interface is the main component of the application, providing real-time
 - Message status (sent, delivered, read)
 - File attachments support
 - Responsive design
+- **Built-in dark-mode support with a theme toggle** <!-- NEW -->
 
 ## Usage
 
@@ -32,6 +33,35 @@ export default function YourComponent() {
 }
 ```
 
+### Enabling Dark Mode <!-- NEW -->
+
+Dark mode is powered by `next-themes` and Tailwind CSS’ `dark` variant:
+
+1. A `ThemeProvider` is wrapped around the application in `app/layout.tsx`.
+2. Tailwind is configured with `darkMode: 'class'` in `tailwind.config.js`.
+3. The chat interface contains dark-aware utility classes (e.g. `dark:bg-gray-800`).
+4. A reusable `DarkModeToggle` component (located at `app/components/DarkModeToggle.tsx`) switches between light and dark themes.
+
+If you embed the `ChatInterface` outside the default layout, make sure to:
+
+```tsx
+import { ThemeProvider } from 'next-themes';
+
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  <ChatInterface />
+</ThemeProvider>
+```
+
+Optionally render the toggle anywhere in your UI:
+
+```tsx
+import DarkModeToggle from '@/components/DarkModeToggle';
+
+<DarkModeToggle />
+```
+
 ## Customization
 
-The chat interface can be customized through props and CSS styling. See the component documentation for available options.
+The chat interface can be customized through props and CSS styling. With the new dark-mode implementation, you can further tailor colors by extending Tailwind’s theme in `tailwind.config.js` or by adding additional `dark:` utility classes where needed.
+
+For a complete list of available props and customization hooks, see the component source code.

From 046389a8ccd19b2ea10f8e38b2178ef806e653fb Mon Sep 17 00:00:00 2001
From: "pr-test1[bot]" <226697212+pr-test1[bot]@users.noreply.github.com>
Date: Fri, 12 Sep 2025 00:43:37 +0000
Subject: [PATCH 2/2] docs: update docs/introduction.mdx for changes #19

---
 docs/introduction.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/introduction.mdx b/docs/introduction.mdx
index dc4ecd9..8097704 100644
--- a/docs/introduction.mdx
+++ b/docs/introduction.mdx
@@ -14,6 +14,7 @@ This is a Next.js-based chatbot application that provides real-time chat functio
 - Admin dashboard
 - User statistics
 - Responsive design
+- Light & dark mode theme support
 - Next.js 13+ App Router
 - TypeScript support