White logo and media query for dark theme

app.py

@@ -72,13 +72,16 @@ def init_leaderboard(dataframe, benchmark_type):
         wrap=False,
     )
 
+black_logo_path = "src/assets/logo-icon-black.png"
+white_logo_path = "src/assets/logo-icon-white.png"
 
 demo = gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue=gr.themes.colors.pink))
 with demo:
     gr.HTML(f"""
     <div id="page-header" style="text-align:center; margin-bottom:1rem;">
         <div id="left-container">
-            <img src="/gradio_api/file=src/assets/logo-icon.png">
+            <img id="black-logo" src="/gradio_api/file={black_logo_path}">
+            <img id="white-logo" src="/gradio_api/file={white_logo_path}">
         </div>
         <div id="centre-container">
             <h1 style="margin-bottom: 0.25rem;">{TITLE}</h1>
@@ -102,8 +105,9 @@ with demo:
         with gr.TabItem("About", elem_id="llm-benchmark-tab-table", id=2):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
+assets = [black_logo_path, white_logo_path]
 
 scheduler = BackgroundScheduler()
 scheduler.add_job(restart_space, "interval", seconds=1800)
 scheduler.start()
-demo.queue(default_concurrency_limit=40).launch(allowed_paths=["src/assets/logo-icon.png"])
+demo.queue(default_concurrency_limit=40).launch(allowed_paths=assets)

src/display/css_html_js.py

@@ -250,11 +250,19 @@ table.table {
     flex: 1;
 }
 
-#left-container img {
+#left-container #black-logo, #left-container #white-logo {
     height: 150px;
     width: 150px;
 }
 
+#left-container #black-logo {
+    display: block;
+}
+
+#left-container #white-logo {
+    display: none;
+}
+
 #centre-container {
     align-self: center;
 }
@@ -263,6 +271,16 @@ table.table {
     flex: 1;
 }
 
+@media (prefers-color-scheme: dark) {
+    #left-container #black-logo {
+        display: none;
+    }    
+    #left-container #white-logo {
+        display: block;
+    }
+}
+
+
 """
 
 # .selected.svelte-1tcem6n.svelte-1tcem6n {