modified app.py

app.py

@@ -76,11 +76,24 @@ footer, .gradio-footer, .svelte-1ipelgc, .gradio-logo, .gradio-app__settings {
 .btn-primary:hover { background: #1557b0 !important; border-color: #1557b0 !important; }
 .results-text strong { color: #0056b3 !important; font-weight: bold !important; }
 div[data-testid="markdown"] strong { color: #0056b3 !important; font-weight: bold !important; }
+
+/* Dark theme compatibility */
+.dark h1#main_title, .dark #main_title h1 {
+    color: #4dabf7 !important;
+    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
+}
+.dark h3#subtitle, .dark #subtitle h3 {
+    color: #e9ecef !important; 
+    text-shadow: 0px 0px 2px rgba(0,0,0,0.5);
+}
+.dark #subtitle a {
+    color: #4dabf7 !important;
+}
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("<h1 style='font-size:2.5em; color:#007dc3; margin-bottom:0;'>SR100 Vision Model Space</h1>", elem_id="main_title")
-    gr.Markdown("<h3 style='margin-top:0; color:#000;'>Vision models for Person Presence developed by Synaptics for specific to Astra SR100 MCU. Learn more at <a href='https://developer.synaptics.com/docs/sr/sr100/quick-start?utm_source=hf' target='_blank' style='color:#007dc3; text-decoration:underline;'>Synaptics AI Developer Zone</a></h3>", elem_id="subtitle")
+    gr.Markdown("<h1 style='font-size:2.5em; color:#007dc3; margin-bottom:0; text-shadow: 0px 0px 3px rgba(255,255,255,0.5);'>SR100 Vision Model Space</h1>", elem_id="main_title")
+    gr.Markdown("<h3 style='margin-top:0; color:var(--body-text-color, #000); text-shadow: 0px 0px 2px rgba(255,255,255,0.5);'>Vision models for Person Presence developed by Synaptics for specific to Astra SR100 MCU. Learn more at <a href='https://developer.synaptics.com/docs/sr/sr100/quick-start?utm_source=hf' target='_blank' style='color:#007dc3; text-decoration:underline;'>Synaptics AI Developer Zone</a></h3>", elem_id="subtitle")
     user_text = gr.Markdown("")
     with gr.Row():
         with gr.Column(scale=1):