add light logo

app.py

@@ -120,6 +120,13 @@ def ensure_dropdowns(fileobj):
             gr.Dropdown(choices=[], value=None),
         )
     
+# pick logo file given theme
+def pick_logo(theme):
+    if theme == "dark":
+        return "tahoe-navy-logo.png"
+    else:
+        return "tahoe-white-logo.png"
+
 # custom callback to report progress to Gradio
 class GradioProgressCallback(Callback):
     def __init__(self, progress, total_batches, start=0.25, end=0.75):
@@ -415,8 +422,24 @@ div#tahoe-logo {
 """
 with gr.Blocks(title=APP_TITLE, css=css) as demo:
 
+    # figure out theme
+    theme_state = gr.State("light")
+    demo.load(
+        None,
+        None,
+        [theme_state],
+        _js="""
+        (x) => {
+            const match = window.matchMedia('(prefers-color-scheme: dark)');
+            const getTheme = () => (match.matches ? 'dark' : 'light');
+            match.onchange = () => window.gradioURL('/reset');  // reloads the Blocks, optional
+            return getTheme();
+        }
+        """,
+    )
+
     # header
-    gr.Image(
+    logo = gr.Image(
         value="tahoe-navy-logo.png",
         height=50,
         label=None,
@@ -429,6 +452,7 @@ with gr.Blocks(title=APP_TITLE, css=css) as demo:
         show_download_button=False
     )
     gr.Markdown(f"# {APP_TITLE}\n{APP_DESC}")
+    demo.load(pick_logo, inputs=[theme_state], outputs=[logo], queue=False)
 
     # file upload block
     f_in = gr.File(label="Upload .h5ad", file_types=[".h5ad"], type="filepath")