Merge pull request #74 from CopilotKit/fix/demo-gallery-dark-readability

fix: make demo gallery readable in dark mode on mobile

Author: GeneralJerel

apps/app/src/app/globals.css

@@ -637,6 +637,21 @@ body, html {
   }
 }
 
+/* === Demo Gallery Dark Mode Readability Fix === */
+:root.dark .demo-gallery-drawer {
+  background: var(--color-surface) !important;
+}
+
+:root.dark .demo-gallery-drawer .demo-gallery-card {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+:root.dark .demo-gallery-drawer .demo-gallery-chip {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
 /* === Flash Animation === */
 .content-flash {
   animation: content-flash 700ms ease-out;

apps/app/src/components/demo-gallery/category-filter.tsx

@@ -19,7 +19,7 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
           <button
             key={cat ?? "all"}
             onClick={() => onSelect(cat)}
-            className="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer"
+            className="demo-gallery-chip shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer"
             style={{
               background: isActive
                 ? "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))"

apps/app/src/components/demo-gallery/demo-card.tsx

@@ -24,7 +24,7 @@ export function DemoCard({ demo, onTry }: DemoCardProps) {
   return (
     <button
       onClick={() => onTry(demo)}
-      className="rounded-xl overflow-hidden flex flex-col text-left transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer w-full"
+      className="demo-gallery-card rounded-xl overflow-hidden flex flex-col text-left transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer w-full"
       style={{
         border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
         background: "var(--surface-primary, #fff)",