From d7160f3bcb900d514ee39881e45d47651a62fab9 Mon Sep 17 00:00:00 2001
From: f-trycua <f@trycua.com>
Date: Sat, 6 Dec 2025 19:08:45 -0800
Subject: [PATCH] Use separate img tags with dark: variant for theme switching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/content/docs/index.mdx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/docs/content/docs/index.mdx b/docs/content/docs/index.mdx
index a7d1951c..26f36cb6 100644
--- a/docs/content/docs/index.mdx
+++ b/docs/content/docs/index.mdx
@@ -4,12 +4,17 @@ title: Introduction
 
 import { Monitor, Code, BookOpen, Zap, Bot, Boxes, Rocket } from 'lucide-react';
 
-<div className="relative rounded-xl overflow-hidden mb-8">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcSet="/docs/img/bg-dark.jpg" />
-    <source media="(prefers-color-scheme: light)" srcSet="/docs/img/bg-light.jpg" />
-    <img src="/docs/img/bg-light.jpg" alt="Cua" style={{width: '100%', height: 'auto', display: 'block'}} />
-  </picture>
+<div className="relative rounded-xl overflow-hidden mb-8 w-full">
+  <img
+    src="/docs/img/bg-light.jpg"
+    alt="Cua"
+    className="w-full h-auto block dark:hidden"
+  />
+  <img
+    src="/docs/img/bg-dark.jpg"
+    alt="Cua"
+    className="w-full h-auto hidden dark:block"
+  />
   <div className="absolute inset-0 flex items-center justify-center bg-black/10">
     <span className="text-white text-xl font-medium text-center px-4 drop-shadow-lg">Build AI agents that see, understand, and control any computer</span>
   </div>