UI: Revert to clean white/light theme

app.py

@@ -20,26 +20,24 @@ st.set_page_config(
     layout="wide"
 )
 
-# Enhanced Custom CSS
+# Clean Light Theme CSS
 st.markdown("""
 <style>
     .stApp {
-        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+        background-color: #f8f9fa;
     }
     .main-header {
-        background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+        color: #2c3e50;
         font-size: 2.5rem;
         font-weight: bold;
         text-align: center;
     }
     .metric-card {
-        background: rgba(255,255,255,0.1);
-        backdrop-filter: blur(10px);
+        background: white;
         border-radius: 15px;
         padding: 1.5rem;
-        border: 1px solid rgba(255,255,255,0.2);
+        border: 1px solid #e0e0e0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
         margin: 0.5rem 0;
     }
     .gene-badge {
@@ -51,18 +49,20 @@ st.markdown("""
         display: inline-block;
     }
     .alert-box {
-        background: rgba(255,75,75,0.2);
-        border-left: 4px solid #ff4b4b;
+        background: #fff5f5;
+        border-left: 4px solid #e53e3e;
         padding: 1rem;
         border-radius: 0 10px 10px 0;
         margin: 1rem 0;
+        color: #c53030;
     }
     .success-box {
-        background: rgba(0,200,83,0.2);
-        border-left: 4px solid #00c853;
+        background: #f0fff4;
+        border-left: 4px solid #38a169;
         padding: 1rem;
         border-radius: 0 10px 10px 0;
         margin: 1rem 0;
+        color: #276749;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -70,7 +70,7 @@ st.markdown("""
 # Application Header
 st.markdown('<h1 class="main-header">🧬 Virtual Gene Scope v2.0</h1>', unsafe_allow_html=True)
 st.markdown("""
-<p style="text-align: center; color: #a0aec0; font-size: 1.1rem;">
+<p style="text-align: center; color: #4a5568; font-size: 1.1rem;">
 Explore the Regulatory Genome with Google DeepMind's AlphaGenome<br>
 <em>Multi-modal predictions: Expression • Splicing • Chromatin • Contact Maps</em>
 </p>
@@ -272,15 +272,11 @@ if not api_key:
             ax.set_xlabel('Genomic Position (relative)')
             ax.set_ylabel('Predicted Signal')
             ax.legend()
-            ax.set_facecolor('#1a1a2e')
-            fig.patch.set_facecolor('#1a1a2e')
-            for spine in ax.spines.values():
-                spine.set_color('white')
-            ax.tick_params(colors='white')
-            ax.xaxis.label.set_color('white')
-            ax.yaxis.label.set_color('white')
-            ax.title.set_color('white')
-            ax.legend(facecolor='#2d2d44', labelcolor='white')
+            ax.set_facecolor('white')
+            fig.patch.set_facecolor('white')
+            ax.spines['top'].set_visible(False)
+            ax.spines['right'].set_visible(False)
+            ax.grid(True, alpha=0.3)
             st.pyplot(fig)
         
         if "Splicing" in output_modalities:
@@ -296,11 +292,11 @@ if not api_key:
             ax2.bar(x[350:360], splice_ref[350:360], width=0.5, alpha=0.6, color='#4CAF50')
             ax2.bar(x[350:360], splice_alt[350:360], width=0.3, alpha=0.8, color='#ff4b4b')
             ax2.set_title('Splice Site Usage')
-            ax2.set_facecolor('#1a1a2e')
-            fig2.patch.set_facecolor('#1a1a2e')
-            ax2.tick_params(colors='white')
-            ax2.title.set_color('white')
-            ax2.legend(facecolor='#2d2d44', labelcolor='white')
+            ax2.set_facecolor('white')
+            fig2.patch.set_facecolor('white')
+            ax2.spines['top'].set_visible(False)
+            ax2.spines['right'].set_visible(False)
+            ax2.grid(True, alpha=0.3)
             st.pyplot(fig2)
 
 else: