fix: ui for dark theme

Gradio_UI.py

@@ -261,16 +261,49 @@ class GradioUI:
     def launch(self, **kwargs):
         import gradio as gr
 
-        with gr.Blocks(fill_height=True) as demo:
+        banner_css = """
+        :root {
+            --banner-bg: #fff3cd;
+            --banner-border: #ffeaa7;
+            --banner-text: #856404;
+            --banner-link: #007bff;
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --banner-bg: #2b2a1f;
+                --banner-border: #6b5e00;
+                --banner-text: #f5e6a7;
+                --banner-link: #7cb7ff;
+            }
+        }
+        .qsar-banner {
+            background-color: var(--banner-bg);
+            border: 1px solid var(--banner-border);
+            border-radius: 5px;
+            padding: 15px;
+            margin: 10px 0;
+            color: var(--banner-text);
+        }
+        .qsar-banner h3 {
+            color: var(--banner-text);
+            margin-top: 0;
+        }
+        .qsar-banner a { color: var(--banner-link); }
+        .qsar-banner hr { border-color: var(--banner-border); }
+        .qsar-banner p { margin: 5px 0; }
+        .qsar-banner .support { font-size: 12px; }
+        """
+
+        with gr.Blocks(fill_height=True, css=banner_css) as demo:
             # Add disclaimers and project information
             gr.HTML("""
-            <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 15px; margin: 10px 0;">
-                <h3 style="color: #856404; margin-top: 0;">⚠️ Important Disclaimers</h3>
-                <p style="margin: 5px 0;"><strong>Early Development Version:</strong> This is an early development version of QSARion. All results should be handled carefully and verified before use in any real applications.</p>
-                <p style="margin: 5px 0;"><strong>AI/ML-Generated Results:</strong> All predictions are generated using artificial intelligence and machine learning models. Results may contain inaccuracies and should not be used as the sole basis for decision-making.</p>
-                <p style="margin: 5px 0;"><strong>Verification Required:</strong> Always verify predictions through experimental validation or consultation with domain experts before practical application.</p>
-                <hr style="margin: 10px 0; border-color: #ffeaa7;">
-                <p style="margin: 5px 0; font-size: 12px;"><strong>Supported by:</strong> This work is supported by the <a href="https://pink-project.eu/" target="_blank" style="color: #007bff;">PINK Project</a> - a Horizon Europe initiative for Safe-and-Sustainable-by-Design computational approaches for chemicals and materials.</p>
+            <div class=\"qsar-banner\"> 
+                <h3>⚠️ Important Disclaimers</h3>
+                <p><strong>Early Development Version:</strong> This is an early development version of QSARion. All results should be handled carefully and verified before use in any real applications.</p>
+                <p><strong>AI/ML-Generated Results:</strong> All predictions are generated using artificial intelligence and machine learning models. Results may contain inaccuracies and should not be used as the sole basis for decision-making.</p>
+                <p><strong>Verification Required:</strong> Always verify predictions through experimental validation or consultation with domain experts before practical application.</p>
+                <hr>
+                <p class=\"support\"><strong>Supported by:</strong> This work is supported by the <a href=\"https://pink-project.eu/\" target=\"_blank\">PINK Project</a> - a Horizon Europe initiative for Safe-and-Sustainable-by-Design computational approaches for chemicals and materials.</p>
             </div>
             """)
             
@@ -305,4 +338,4 @@ class GradioUI:
         demo.launch(debug=True, share=True, **kwargs)
 
 
-__all__ = ["stream_to_gradio", "GradioUI"]
+__all__ = ["stream_to_gradio", "GradioUI"]