diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 4c9091a3..f6c38402 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono, Inter, Playfair_Display } from "next/font/google";
import "@multica/ui/globals.css";
import { ThemeProvider } from "@multica/ui/components/theme-provider";
+import { ThemeToggle } from "./theme-toggle";
import { Toaster } from "@multica/ui/components/ui/sonner";
import { ServiceWorkerRegister } from "./sw-register";
@@ -52,6 +53,7 @@ export default function RootLayout({
enableSystem
disableTransitionOnChange
>
+
{children}
diff --git a/apps/web/app/theme-toggle.tsx b/apps/web/app/theme-toggle.tsx
new file mode 100644
index 00000000..60342b4b
--- /dev/null
+++ b/apps/web/app/theme-toggle.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Button } from "@multica/ui/components/ui/button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons";
+
+export function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 954a4008..95b1b67c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -17,6 +17,7 @@
"@hugeicons/core-free-icons": "^3.1.1",
"@hugeicons/react": "^1.1.4",
"next": "16.1.6",
+ "next-themes": "^0.4.6",
"react": "catalog:",
"react-dom": "catalog:"
},
diff --git a/packages/ui/src/components/chat.tsx b/packages/ui/src/components/chat.tsx
index 577df6a8..9dea198f 100644
--- a/packages/ui/src/components/chat.tsx
+++ b/packages/ui/src/components/chat.tsx
@@ -1,14 +1,11 @@
"use client";
import { useRef, useState, useCallback, useMemo } from "react";
-import { useTheme } from "next-themes";
import { Button } from "@multica/ui/components/ui/button";
import { Textarea } from "@multica/ui/components/ui/textarea";
import { ChatInput } from "@multica/ui/components/chat-input";
import { MemoizedMarkdown } from "@multica/ui/components/markdown";
import { StreamingMarkdown } from "@multica/ui/components/markdown/StreamingMarkdown";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons";
import { toast } from "@multica/ui/components/ui/sonner";
import {
useHubStore,
@@ -27,8 +24,6 @@ import { cn } from "@multica/ui/lib/utils";
export function Chat() {
useHubInit()
const deviceId = useDeviceId()
- const { theme, setTheme } = useTheme()
-
const activeAgentId = useHubStore((s) => s.activeAgentId)
const gwState = useGatewayStore((s) => s.connectionState)
const hubId = useGatewayStore((s) => s.hubId)
@@ -83,15 +78,6 @@ export function Chat() {
-
{isConnected && (