try switching between two gr.Image components

app.py

@@ -407,24 +407,45 @@ def run_pipeline(fileobj, layer_choice, var_choice, obs_choice, use_symbols, pro
 
 # specify app layout
 css = """
-h1 {text-align: center}
+h1 {text-align: center;}
 div#tahoe-logo {
     margin-top: 20px;
     margin-bottom: 20px;
 }
+#logo-dark {display: none;}
+@media (prefers-color-scheme: dark) {
+  #logo-light {display: none;}
+  #logo-dark {display: block;}
+}
 """
 with gr.Blocks(title=APP_TITLE, css=css) as demo:
 
     # header
-    gr.HTML(
-        """
-        <picture style="display:block; margin:20px auto; text-align:center">
-        <source srcset="file=tahoe-white-logo.png" media="(prefers-color-scheme: dark)">
-        <img id="tahoe-logo-img" src="file=tahoe-navy-logo.png" height="50" alt="Tahoe logo" style="display:inline-block">
-        </picture>
-        """,
-        elem_id="tahoe-logo"
-    )
+    with gr.Row(elem_id="tahoe-logo", equal_height=True):
+        light_logo = gr.Image(
+            value="tahoe-navy-logo.png",
+            height=50,
+            show_label=False,
+            container=False,
+            interactive=False,
+            elem_id="logo-light",
+            show_share_button=False,
+            show_fullscreen_button=False,
+            show_download_button=False,
+            scale=0
+        )
+        dark_logo = gr.Image(
+            value="tahoe-white-logo.png",
+            height=50,
+            show_label=False,
+            container=False,
+            interactive=False,
+            elem_id="logo-dark",
+            show_share_button=False,
+            show_fullscreen_button=False,
+            show_download_button=False,
+            scale=0
+        )
     gr.Markdown(f"# {APP_TITLE}\n{APP_DESC}")
 
     # file upload block