Switch to dark theme — dark boxes with light text

app.py

@@ -153,15 +153,15 @@ def predict(sequence, inhibitor_choice, inhibitor_custom, inh_type, substrate_sm
 # ----------------------------------------------------------------------
 
 CSS = """
-/* Force a consistent LIGHT theme regardless of system dark-mode preference.
-   We set BOTH backgrounds and text together so contrast is always guaranteed. */
+/* Force a consistent DARK theme regardless of system preference.
+   Dark backgrounds with light text — both set together so contrast is guaranteed. */
 
 html, body, .gradio-container, .gradio-container .main {
-    background: #ffffff !important;
-    color: #111827 !important;
+    background: #0b1220 !important;
+    color: #f3f4f6 !important;
 }
 
-/* All Gradio block-level containers — force white/light backgrounds */
+/* All Gradio block-level containers — force dark backgrounds */
 .gradio-container .block,
 .gradio-container .form,
 .gradio-container .panel,
@@ -179,24 +179,29 @@ html, body, .gradio-container, .gradio-container .main {
 .gradio-container .prose,
 .gradio-container .markdown,
 .gradio-container .markdown-body {
-    background-color: #ffffff !important;
-    color: #111827 !important;
+    background-color: #111827 !important;
+    color: #f3f4f6 !important;
+    border-color: #374151 !important;
 }
 
-/* Inputs use a subtle gray */
+/* Inputs — slightly lighter slate so they stand out from the page */
 .gradio-container input,
 .gradio-container textarea,
 .gradio-container select,
 .gradio-container .gr-input,
 .gradio-container .gr-textarea {
-    background-color: #f9fafb !important;
-    color: #111827 !important;
-    border-color: #d1d5db !important;
+    background-color: #1f2937 !important;
+    color: #f9fafb !important;
+    border-color: #374151 !important;
+}
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder {
+    color: #9ca3af !important;
 }
 
 /* All text */
 .gradio-container, .gradio-container * {
-    color: #111827 !important;
+    color: #f3f4f6 !important;
 }
 .gradio-container h1,
 .gradio-container h2,
@@ -206,38 +211,40 @@ html, body, .gradio-container, .gradio-container .main {
 .gradio-container h6,
 .gradio-container strong,
 .gradio-container b {
-    color: #0f172a !important;
+    color: #ffffff !important;
 }
 
 /* Tables */
 .gradio-container table {
-    background-color: #ffffff !important;
-    border-color: #e5e7eb !important;
+    background-color: #111827 !important;
+    border-color: #374151 !important;
 }
 .gradio-container table th,
 .gradio-container table td {
-    color: #1f2937 !important;
-    background-color: #ffffff !important;
-    border-color: #e5e7eb !important;
+    color: #e5e7eb !important;
+    background-color: #111827 !important;
+    border-color: #374151 !important;
 }
 .gradio-container table th {
-    background-color: #f3f4f6 !important;
+    background-color: #1f2937 !important;
+    color: #ffffff !important;
 }
 
-/* Links and inline code */
-.gradio-container a { color: #2563eb !important; }
+/* Links and inline code — bright accent colors that pop on dark */
+.gradio-container a { color: #93c5fd !important; }
 .gradio-container code {
-    background-color: #f3f4f6 !important;
-    color: #be185d !important;
+    background-color: #1f2937 !important;
+    color: #fbcfe8 !important;
 }
 
-/* Primary buttons keep dark-blue background with white text */
+/* Primary buttons — keep vivid blue with white text */
 .gradio-container button.primary,
 .gradio-container button.lg.primary,
 .gradio-container .primary,
 .gradio-container .primary * {
     background: #2563eb !important;
     color: #ffffff !important;
+    border-color: #1d4ed8 !important;
 }
 
 /* Title block layout */
@@ -245,8 +252,8 @@ html, body, .gradio-container, .gradio-container .main {
 
 /* Ki result card */
 .ki-card {
-    background: #ffffff !important;
-    border: 1px solid #d1d5db !important;
+    background: #111827 !important;
+    border: 1px solid #374151 !important;
     border-radius: 8px !important;
     padding: 1em 1.5em !important;
 }