fix: Apply RippleUI theme colors to all generated HTML blocks

Ensure that createHtmlBlock applies the same theme-aware CSS as other
HTML rendering functions, so generated elements respect dark/light mode
theme preferences. This fixes incorrect colors in dark mode for agent
response HTML blocks.

Author: lanmower

static/app.js

@@ -1458,7 +1458,57 @@ class GMGUIApp {
     }
     const content = document.createElement('div');
     content.className = 'html-content';
-    content.innerHTML = this.sanitizeHtml(event.html);
+
+    // Get current theme to apply to HTML content
+    const currentTheme = document.documentElement.getAttribute('data-theme') ||
+                        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
+    // Apply theme-aware CSS for consistent colors in dark/light mode
+    const themeCSS = currentTheme === 'dark'
+      ? `<style>
+           .html-content {
+             color: #f8fafc;
+             background: transparent;
+           }
+           .html-content p { color: #cbd5e1; }
+           .html-content h1, .html-content h2, .html-content h3,
+           .html-content h4, .html-content h5, .html-content h6 {
+             color: #f8fafc;
+           }
+           .html-content a { color: #6366f1; }
+           .html-content code { color: #c7d2fe; background: rgba(0,0,0,0.3); }
+           .html-content pre { background: rgba(0,0,0,0.5); color: #e0e7ff; }
+           .html-content table { border-color: #334155; }
+           .html-content th { background: #1a202c; color: #f8fafc; }
+           .html-content td { border-color: #334155; }
+           .html-content blockquote { border-color: #334155; color: #cbd5e1; }
+           .html-content ul, .html-content ol { color: #cbd5e1; }
+           .html-content li { color: #cbd5e1; }
+        </style>`
+      : `<style>
+           .html-content {
+             color: #1d2129;
+             background: transparent;
+           }
+           .html-content p { color: #475569; }
+           .html-content h1, .html-content h2, .html-content h3,
+           .html-content h4, .html-content h5, .html-content h6 {
+             color: #1d2129;
+           }
+           .html-content a { color: #4f46e5; }
+           .html-content code { color: #6366f1; background: rgba(99,102,241,0.1); }
+           .html-content pre { background: #f3f4f6; color: #1d2129; }
+           .html-content table { border-color: #e5e7eb; }
+           .html-content th { background: #f9fafb; color: #1d2129; }
+           .html-content td { border-color: #e5e7eb; }
+           .html-content blockquote { border-color: #e5e7eb; color: #475569; }
+           .html-content ul, .html-content ol { color: #475569; }
+           .html-content li { color: #475569; }
+        </style>`;
+
+    const enhancedHtml = themeCSS + this.sanitizeHtml(event.html);
+    content.innerHTML = enhancedHtml;
+    content.setAttribute('data-theme', currentTheme);
     wrap.appendChild(content);
     return wrap;
   }