diff --git a/apps/docs/app/docs/layout.config.tsx b/apps/docs/app/docs/layout.config.tsx
index eaf340255..a2f302167 100644
--- a/apps/docs/app/docs/layout.config.tsx
+++ b/apps/docs/app/docs/layout.config.tsx
@@ -3,7 +3,7 @@ import { pageTree } from "@/app/source";
 import { RootToggle } from "fumadocs-ui/components/layout/root-toggle";
 import { BookIcon, LayoutTemplateIcon, PhoneCallIcon } from "lucide-react";
 import { LibraryIcon, type LucideIcon } from "lucide-react";
-import icon from "@/public/favicon/favicon.svg";
+import icon from "@/public/favicon/icon.svg";
 import Image from "next/image";
 
 type Mode = {
@@ -52,7 +52,11 @@ export const baseOptions: BaseLayoutProps = {
   nav: {
     title: (
       <>
-        <Image src={icon} alt="logo" className="inline size-4" />
+        <Image
+          src={icon}
+          alt="logo"
+          className="inline size-4 dark:hue-rotate-180 dark:invert"
+        />
         <span className="font-medium">assistant-ui</span>
       </>
     ),
diff --git a/apps/docs/components/shadcn/Shadcn.tsx b/apps/docs/components/shadcn/Shadcn.tsx
index 885e94a7e..e2608700d 100644
--- a/apps/docs/components/shadcn/Shadcn.tsx
+++ b/apps/docs/components/shadcn/Shadcn.tsx
@@ -11,7 +11,7 @@ import { type FC } from "react";
 
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import icon from "@/public/favicon/favicon.svg";
+import icon from "@/public/favicon/icon.svg";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import {
   TooltipProvider,
@@ -72,7 +72,11 @@ const TopLeft: FC = () => {
       side="right"
     >
       <div className="flex items-center gap-2 text-sm font-semibold">
-        <Image src={icon} alt="logo" className="inline size-4" />
+        <Image
+          src={icon}
+          alt="logo"
+          className="inline size-4 dark:hue-rotate-180 dark:invert"
+        />
         <span>assistant-ui</span>
       </div>
 
diff --git a/apps/docs/public/favicon/favicon.svg b/apps/docs/public/favicon/favicon.svg
index e0bb16912..7391671f8 100644
--- a/apps/docs/public/favicon/favicon.svg
+++ b/apps/docs/public/favicon/favicon.svg
@@ -1,9 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square">
 	<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z">
 	</path>
 	<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1">
 	</path>
-	<style>
-		@media (prefers-color-scheme: dark) { :root { filter: invert(100%); } }
-	</style>
 </svg>
diff --git a/apps/docs/public/favicon/icon.svg b/apps/docs/public/favicon/icon.svg
new file mode 100644
index 000000000..e597051b6
--- /dev/null
+++ b/apps/docs/public/favicon/icon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square">
+	<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z">
+	</path>
+	<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1">
+	</path>
+</svg>