Update app.py

app.py

@@ -49,7 +49,14 @@ CSS = """:root{
   --muted:#4b5a58;
   --border: rgba(11,27,25,0.15);
 }
-
+#btn_tag{
+  background: var(--primary-500) !important;
+  border-color: var(--primary-600) !important;
+  color:#0b1b19 !important;
+}
+#btn_tag:hover{
+  background: var(--primary-600) !important;
+}
 
 /* Page background */
 html, body, .gradio-container{
@@ -303,6 +310,15 @@ a{ color:var(--primary-700)!important; }
     --primary-200:#2a3b38;
   }
 
+  #btn_tag{
+    background: var(--primary-500) !important;
+    border-color: var(--primary-600) !important;
+    color:#0b1b19 !important;
+    }
+    #btn_tag:hover{
+    background: var(--primary-600) !important;
+    }
+
   html, body, .gradio-container{
     background: var(--page-bg) !important;
     color: var(--text) !important;
@@ -352,6 +368,72 @@ a{ color:var(--primary-700)!important; }
     border-color: var(--primary-600) !important;
     color: var(--text) !important;
   }
+    /* ---------- DARK MODE PATCH: fix Gradio component internals ---------- */
+
+  /* Headings / markdown titles (your “Úrslit”, accordion titles, etc.) */
+  .prose h1, .prose h2, .prose h3, .prose h4, .prose strong,
+  .gr-markdown h1, .gr-markdown h2, .gr-markdown h3, .gr-markdown h4,
+  .gr-markdown, .markdown, .prose {
+    color: var(--text) !important;
+  }
+
+  /* Accordion header/button text */
+  .gr-accordion summary,
+  .gr-accordion summary span,
+  .gr-accordion label,
+  .gr-accordion button {
+    color: var(--text) !important;
+  }
+
+  /* Make accordion header background readable */
+  .gr-accordion summary {
+    background: var(--panel-bg) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 10px !important;
+  }
+
+  /* Dataframe wrapper + all nested table bits */
+  .gr-dataframe,
+  .gr-dataframe .wrap,
+  .gr-dataframe .table-wrap,
+  .gr-dataframe table,
+  .gr-dataframe thead,
+  .gr-dataframe tbody,
+  .gr-dataframe tr,
+  .gr-dataframe th,
+  .gr-dataframe td {
+    background: var(--panel-bg) !important;
+    color: var(--text) !important;
+    border-color: var(--border) !important;
+  }
+
+  /* Fix links inside markdown in dark mode */
+  .gr-markdown a, .prose a {
+    color: var(--primary-500) !important;
+  }
+
+  /* Make inputs/selects/buttons inherit dark text properly */
+  input, textarea, select {
+    color: var(--text) !important;
+  }
+
+  /* FORCE your green primary button (Marka/Tag) even if Gradio theme fights back */
+  button.primary,
+  .gr-button-primary,
+  .gr-button.gr-button-primary,
+  button[data-testid="button"],
+  button:has(span:contains("Marka")),
+  button:has(span:contains("Tag")) {
+    background: var(--primary-500) !important;
+    border-color: var(--primary-600) !important;
+    color: #0b1b19 !important;
+  }
+  button.primary:hover,
+  .gr-button-primary:hover,
+  .gr-button.gr-button-primary:hover {
+    background: var(--primary-600) !important;
+  }
+
 }
 """
 
@@ -657,7 +739,7 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
                 "Skriv ein setning í kassan og fá hann markaðan.\n\n"
                 f"Myndil / Model: [{MODEL_ID}]({MODEL_LINK})"
             )
-            btn = gr.Button("Marka / Tag", variant="primary")
+            btn = gr.Button("Marka / Tag", variant="primary", elem_id="btn_tag")
 
     state = gr.State([])
     lang_state = gr.State("fo")