Update app.py

app.py

@@ -36,11 +36,21 @@ UI = {
 MODEL_LINK = "https://huggingface.co/Setur/BRAGD"
 
 CSS = """:root{
+  /* tell the browser we support both */
+  color-scheme: light dark;
+
   --primary-500:#89AFA9; --primary-600:#6F9992; --primary-700:#5B7F79;
   --primary-100:#E1ECEA; --primary-200:#C6DAD6;
+
+  /* LIGHT */
   --page-bg:#f7f7f8;
+  --panel-bg:#ffffff;
+  --text:#0b1b19;
+  --muted:#4b5a58;
+  --border: rgba(11,27,25,0.15);
 }
 
+
 /* Page background */
 html, body, .gradio-container{
   background: var(--page-bg) !important;
@@ -281,6 +291,68 @@ a{ color:var(--primary-700)!important; }
   border-color:#6F9992 !important;
   color:#0b1b19 !important;
 }
+@media (prefers-color-scheme: dark){
+  :root{
+    --page-bg:#0f1214;
+    --panel-bg:#151a1e;
+    --text:#e7eceb;
+    --muted:#b8c3c1;
+    --border: rgba(231,236,235,0.18);
+
+    /* keep your brand, just shift the “inactive” background darker */
+    --primary-200:#2a3b38;
+  }
+
+  html, body, .gradio-container{
+    background: var(--page-bg) !important;
+    color: var(--text) !important;
+  }
+
+  body, .gradio-container, .prose, .markdown, label, p, span{
+    color: var(--text) !important;
+  }
+
+  .gr-block, .gr-panel, .gr-box, .gr-group, .gr-form{
+    background: transparent !important;
+    border-color: var(--border) !important;
+  }
+
+  #input_box textarea{
+    background: var(--panel-bg) !important;
+    color: var(--text) !important;
+    border: 1px solid var(--border) !important;
+  }
+  #input_box textarea::placeholder{
+    color: var(--muted) !important;
+  }
+
+  .gr-dataframe table{
+    background: var(--panel-bg) !important;
+    color: var(--text) !important;
+  }
+  .gr-dataframe table th,
+  .gr-dataframe table td{
+    background: var(--panel-bg) !important;
+    color: var(--text) !important;
+    border-color: var(--border) !important;
+  }
+
+  .gr-accordion, .gr-accordion *{
+    border-color: var(--border) !important;
+  }
+
+  a{ color: var(--primary-500) !important; }
+
+  .gr-button-primary, button.primary, .primary{
+    color: #0b1b19 !important;
+  }
+
+  #lang_fo_off, #lang_en_off{
+    background: var(--primary-200) !important;
+    border-color: var(--primary-600) !important;
+    color: var(--text) !important;
+  }
+}
 """
 
 # ----------------------------