fix: improve light/dark theme support for UI and visualisations

- Replace hardcoded light mode colours with CSS variables in theme.py
- Add dark mode variants for success/error/info messages
- Update Plotly charts to use adaptive template instead of hardcoded backgrounds
- Remove explicit colour specifications to allow theme inheritance
- Charts now properly adapt to HuggingFace Spaces light/dark mode toggle

backend/theme.py

@@ -92,37 +92,34 @@ class FinancialTheme(Base):
         )
 
 
-# Custom CSS for additional styling
+# Custom CSS for additional styling (theme-adaptive)
 FINANCIAL_CSS = """
 /* Global container styling */
 .gradio-container {
     font-family: 'Inter', 'Arial', sans-serif;
-    background-color: #f8f9fa;
     max-width: 1400px;
     margin: auto;
 }
 
 /* Header styling */
 .markdown-text h1 {
-    color: #242c34;
     font-weight: 600;
-    border-bottom: 2px solid #288cfa;
+    border-bottom: 2px solid var(--color-accent);
     padding-bottom: 0.5rem;
     margin-bottom: 1rem;
 }
 
 .markdown-text h2 {
-    color: #242c34;
     font-weight: 600;
     margin-top: 1.5rem;
     margin-bottom: 0.75rem;
 }
 
 .markdown-text h3 {
-    color: #6b7280;
     font-weight: 500;
     margin-top: 1rem;
     margin-bottom: 0.5rem;
+    opacity: 0.8;
 }
 
 /* Metric cards */
@@ -131,26 +128,22 @@ FINANCIAL_CSS = """
 }
 
 .metric-card {
-    background: white;
     padding: 1.5rem;
     border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    border: 1px solid #e5e7eb;
 }
 
 .metric-card .label {
     font-size: 0.875rem;
-    color: #6b7280;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 0.5rem;
+    opacity: 0.7;
 }
 
 .metric-card .value {
     font-size: 2rem;
     font-weight: 600;
-    color: #242c34;
 }
 
 /* Status colours */
@@ -165,30 +158,23 @@ FINANCIAL_CSS = """
 }
 
 .neutral {
-    color: #6b7280;
     font-weight: 500;
+    opacity: 0.7;
 }
 
 /* Data tables */
 .dataframe {
-    border: 1px solid #e5e7eb !important;
     border-radius: 6px !important;
     overflow: hidden;
 }
 
 .dataframe th {
-    background-color: #f9fafb !important;
-    color: #242c34 !important;
     font-weight: 600 !important;
     text-transform: uppercase;
     font-size: 0.75rem;
     letter-spacing: 0.05em;
 }
 
-.dataframe td {
-    border-color: #e5e7eb !important;
-}
-
 /* Button enhancements */
 .primary.lg {
     padding: 0.75rem 2rem;
@@ -198,28 +184,26 @@ FINANCIAL_CSS = """
 
 /* Progress bar */
 .progress-bar {
-    background: linear-gradient(90deg, #288cfa, #1a7de8) !important;
+    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-soft)) !important;
 }
 
 /* Accordion styling for ChatMessage metadata */
 .message-metadata {
-    border-left: 3px solid #288cfa;
+    border-left: 3px solid var(--color-accent);
     padding-left: 1rem;
     margin: 0.5rem 0;
-    background: #f8f9fa;
     border-radius: 4px;
     padding: 0.75rem 1rem;
 }
 
 .message-metadata .title {
     font-weight: 600;
-    color: #242c34;
     margin-bottom: 0.25rem;
 }
 
 .message-metadata .log {
     font-size: 0.875rem;
-    color: #6b7280;
+    opacity: 0.7;
 }
 
 /* Tool call status indicators */
@@ -237,8 +221,8 @@ FINANCIAL_CSS = """
 
 /* Loading spinner */
 .loading {
-    border: 3px solid #e5e7eb;
-    border-top-color: #288cfa;
+    border: 3px solid var(--border-color-primary);
+    border-top-color: var(--color-accent);
     animation: spin 1s linear infinite;
 }
 
@@ -259,21 +243,14 @@ FINANCIAL_CSS = """
 
 /* Chart containers */
 .plotly-chart {
-    border: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 1rem;
-    background: white;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
 /* Tab styling */
-.tab-nav {
-    border-bottom: 2px solid #e5e7eb;
-}
-
 .tab-nav button.selected {
-    border-bottom: 2px solid #288cfa;
-    color: #288cfa;
+    border-bottom: 2px solid var(--color-accent);
+    color: var(--color-accent);
     font-weight: 600;
 }
 
@@ -286,6 +263,11 @@ FINANCIAL_CSS = """
     color: #991b1b;
 }
 
+.dark .error-message {
+    background: #450a0a;
+    color: #fca5a5;
+}
+
 /* Success messages */
 .success-message {
     background: #d1fae5;
@@ -295,6 +277,11 @@ FINANCIAL_CSS = """
     color: #065f46;
 }
 
+.dark .success-message {
+    background: #064e3b;
+    color: #6ee7b7;
+}
+
 /* Info messages */
 .info-message {
     background: #dbeafe;
@@ -303,6 +290,11 @@ FINANCIAL_CSS = """
     border-radius: 4px;
     color: #1e40af;
 }
+
+.dark .info-message {
+    background: #1e3a8a;
+    color: #93c5fd;
+}
 """
 
 

backend/visualizations/plotly_charts.py

@@ -17,6 +17,15 @@ from typing import Dict, List, Any, Optional
 from decimal import Decimal
 
 
+def get_plotly_template() -> str:
+    """Get Plotly template that supports light/dark mode.
+
+    Returns:
+        Template name for Plotly charts that auto-adapts to theme
+    """
+    return "plotly"  # Uses plotly default which adapts to container background
+
+
 def create_portfolio_allocation_chart(holdings: List[Dict[str, Any]]) -> go.Figure:
     """Create interactive portfolio allocation pie chart.
 
@@ -43,7 +52,7 @@ def create_portfolio_allocation_chart(holdings: List[Dict[str, Any]]) -> go.Figu
         textposition='inside',
         textinfo='percent+label',
         marker=dict(
-            line=dict(color='#000000', width=2),
+            line=dict(width=2),
             colors=px.colors.qualitative.Set3
         )
     ))
@@ -59,9 +68,8 @@ def create_portfolio_allocation_chart(holdings: List[Dict[str, Any]]) -> go.Figu
         uniformtext_minsize=12,
         uniformtext_mode='hide',
         autosize=True,
-        paper_bgcolor='white',
-        plot_bgcolor='#f8f9fa',
-        font={'family': 'Inter, sans-serif', 'color': '#242c34'}
+        template=get_plotly_template(),
+        font={'family': 'Inter, sans-serif'}
     )
 
     return fig
@@ -180,9 +188,8 @@ def create_risk_metrics_dashboard(
     fig.update_layout(
         autosize=True,
         height=600,
-        paper_bgcolor='white',
-        plot_bgcolor='#f8f9fa',
-        font={'family': 'Inter, sans-serif', 'color': '#242c34'},
+        template=get_plotly_template(),
+        font={'family': 'Inter, sans-serif'},
         margin=dict(t=80, b=50, l=50, r=50)
     )
 
@@ -268,9 +275,8 @@ def create_performance_chart(
             xanchor="right",
             x=1
         ),
-        paper_bgcolor='white',
-        plot_bgcolor='#f8f9fa',
-        font={'family': 'Inter, sans-serif', 'color': '#242c34'}
+        template=get_plotly_template(),
+        font={'family': 'Inter, sans-serif'}
     )
 
     return fig
@@ -348,8 +354,8 @@ def create_correlation_heatmap(
         autosize=True,
         width=700,
         height=700,
-        paper_bgcolor='white',
-        font={'family': 'Inter, sans-serif', 'color': '#242c34'}
+        template=get_plotly_template(),
+        font={'family': 'Inter, sans-serif'}
     )
 
     return fig
@@ -427,9 +433,8 @@ def create_optimization_comparison(
         showlegend=False,
         autosize=True,
         height=400,
-        paper_bgcolor='white',
-        plot_bgcolor='#f8f9fa',
-        font={'family': 'Inter, sans-serif', 'color': '#242c34'}
+        template=get_plotly_template(),
+        font={'family': 'Inter, sans-serif'}
     )
 
     fig.update_xaxes(tickangle=-45, row=1, col=1)
@@ -452,38 +457,29 @@ def apply_financial_theme(fig: go.Figure) -> go.Figure:
     fig.update_layout(
         font=dict(
             family="Inter, Arial, sans-serif",
-            size=12,
-            color="#242c34"
+            size=12
         ),
         title_font=dict(
             family="Inter, Arial, sans-serif",
-            size=18,
-            color="#242c34"
+            size=18
         ),
-        paper_bgcolor='white',
-        plot_bgcolor='#f8f9fa',
+        template=get_plotly_template(),
         xaxis=dict(
             showgrid=True,
-            gridcolor='#dee2e6',
             gridwidth=1,
             zeroline=False
         ),
         yaxis=dict(
             showgrid=True,
-            gridcolor='#dee2e6',
             gridwidth=1,
             zeroline=False
         ),
         legend=dict(
-            bgcolor="rgba(255,255,255,0.9)",
-            bordercolor="#dee2e6",
             borderwidth=1
         ),
         hoverlabel=dict(
-            bgcolor="white",
             font_size=12,
-            font_family="Inter, Arial, sans-serif",
-            bordercolor="#dee2e6"
+            font_family="Inter, Arial, sans-serif"
         )
     )