fix: ui for dark theme

Gradio_UI.py

@@ -262,34 +262,65 @@ class GradioUI:
         import gradio as gr
 
         banner_css = """
-        :root {
-            --banner-bg: #fff3cd;
-            --banner-border: #ffeaa7;
-            --banner-text: #856404;
-            --banner-link: #007bff;
+        /* Light mode defaults (high contrast on light backgrounds) */
+        :root,
+        html,
+        body {
+            --banner-bg: #fff8e1;       /* soft amber */
+            --banner-border: #f5d27a;   /* darker amber border */
+            --banner-text: #1f2937;     /* slate-800 for strong contrast */
+            --banner-link: #0b67ff;     /* accessible blue */
         }
+
+        /* Extra dark-mode selectors to match Gradio/app theming */
         @media (prefers-color-scheme: dark) {
-            :root {
-                --banner-bg: #2b2a1f;
-                --banner-border: #6b5e00;
-                --banner-text: #f5e6a7;
-                --banner-link: #7cb7ff;
+            :root,
+            html.dark,
+            [data-theme="dark"],
+            [data-theme*="dark"] {
+                --banner-bg: #1f2430;     /* deep slate */
+                --banner-border: #3a4354; /* subtle border */
+                --banner-text: #f3f4f6;   /* gray-100 */
+                --banner-link: #93c5fd;   /* light blue */
             }
         }
+
+        /* Also respect explicit Gradio dark theme attribute if present */
+        html.dark :root,
+        [data-theme="dark"] :root,
+        [data-theme*="dark"] :root {
+            --banner-bg: #1f2430;
+            --banner-border: #3a4354;
+            --banner-text: #f3f4f6;
+            --banner-link: #93c5fd;
+        }
+
         .qsar-banner {
-            background-color: var(--banner-bg);
-            border: 1px solid var(--banner-border);
-            border-radius: 5px;
-            padding: 15px;
+            background-color: var(--banner-bg) !important;
+            border: 1px solid var(--banner-border) !important;
+            border-radius: 8px;
+            padding: 16px 18px;
             margin: 10px 0;
-            color: var(--banner-text);
+            color: var(--banner-text) !important;
         }
+
+        /* Ensure all text within the banner inherits the correct color */
+        .qsar-banner *,
+        .qsar-banner p,
+        .qsar-banner li,
+        .qsar-banner span,
+        .qsar-banner strong,
+        .qsar-banner em {
+            color: var(--banner-text) !important;
+        }
+
         .qsar-banner h3 {
-            color: var(--banner-text);
+            color: var(--banner-text) !important;
             margin-top: 0;
+            margin-bottom: 8px;
         }
-        .qsar-banner a { color: var(--banner-link); }
-        .qsar-banner hr { border-color: var(--banner-border); }
+        .qsar-banner a { color: var(--banner-link) !important; text-decoration: underline; }
+        .qsar-banner hr { border-color: var(--banner-border) !important; }
         .qsar-banner p { margin: 5px 0; }
         .qsar-banner .support { font-size: 12px; }
         """