Enable dark mode

app.py

@@ -61,6 +61,11 @@ with gr.Blocks(title="Tokens matter.", theme=theme, css="""
     .form { border: 0 !important; }
     .html-container { line-height: 2em; !important; }
     .pending { opacity: 1; }
+
+    @media (prefers-color-scheme: dark) {
+        .gradio-container.gradio-container-5-29-0 .contain .html-container span.model-name { color: white !important; }
+        .html-container span { color: black !important; }
+    }
 """) as demo:
     gr.Markdown("# Tokens matter.")
     
@@ -91,7 +96,7 @@ with gr.Blocks(title="Tokens matter.", theme=theme, css="""
                             continue
                         display_name = utils.MODEL_DISPLAY_NAMES.get(name, name)
                         with gr.Group(elem_classes="tokenizer-panel"):
-                            gr.HTML(value=f'<div style="display: flex; align-items: center; margin-bottom: 8px;">{get_model_icon(name)}<span style="font-weight: bold;">{display_name}</span></div>')
+                            gr.HTML(value=f'<div style="display: flex; align-items: center; margin-bottom: 8px;">{get_model_icon(name)}<span class="model-name"  style="font-weight: bold;">{display_name}</span></div>')
                             box = gr.HTML()
                             main_output_boxes.append(box)
                 with gr.Column():
@@ -100,7 +105,7 @@ with gr.Blocks(title="Tokens matter.", theme=theme, css="""
                             continue
                         display_name = utils.MODEL_DISPLAY_NAMES.get(name, name)
                         with gr.Group(elem_classes="tokenizer-panel"):
-                            gr.HTML(value=f'<div style="display: flex; align-items: center; margin-bottom: 8px;">{get_model_icon(name)}<span style="font-weight: bold;">{display_name}</span></div>')
+                            gr.HTML(value=f'<div style="display: flex; align-items: center; margin-bottom: 8px;">{get_model_icon(name)}<span class="model-name"  style="font-weight: bold;">{display_name}</span></div>')
                             box = gr.HTML()
                             main_output_boxes.append(box)
             
@@ -111,7 +116,7 @@ with gr.Blocks(title="Tokens matter.", theme=theme, css="""
                     if name in ["google/gemma-3-27b-it", "mistralai/Mistral-Nemo-Instruct-2407", "CohereLabs/aya-expanse-8b"]:
                         display_name = utils.MODEL_DISPLAY_NAMES.get(name, name)
                         with gr.Group(elem_classes="tokenizer-panel"):
-                            gr.HTML(value=f'<div style="display: flex; align-items: center; margin-bottom: 8px;">{get_model_icon(name)}<span style="font-weight: bold;">{display_name}</span></div>')
+                            gr.HTML(value=f'<div style="display: flex; align-items: center; margin-bottom: 8px;">{get_model_icon(name)}<span class="model-name"  style="font-weight: bold;">{display_name}</span></div>')
                             box = gr.HTML()
                             more_output_boxes.append(box)