Fix dark mode: use explicit dark theme and colors

app.py

@@ -610,34 +610,20 @@ def gcode_to_svg(gcode: str) -> str:
     
     svg = f'''<svg xmlns="http://www.w3.org/2000/svg" 
                   viewBox="{BOUNDS["left"] - padding} {-BOUNDS["top"] - padding} {w + 2*padding} {h + 2*padding}" 
-                  style="width: 100%; height: 480px; border: 1px solid var(--border, #e0e0e0); border-radius: 4px;">
-        <style>
-            @media (prefers-color-scheme: dark) {{
-                .bg {{ fill: #2a2b30; }}
-                .work {{ fill: #212226; stroke: #3a3b40; }}
-                .stroke {{ stroke: #e8e8e8; }}
-                .label {{ fill: #666; }}
-            }}
-            @media (prefers-color-scheme: light) {{
-                .bg {{ fill: #fff; }}
-                .work {{ fill: #fafafa; stroke: #ccc; }}
-                .stroke {{ stroke: #1a1a1a; }}
-                .label {{ fill: #999; }}
-            }}
-        </style>
-        <rect class="bg" x="{BOUNDS["left"] - padding}" y="{-BOUNDS["top"] - padding}" width="{w + 2*padding}" height="{h + 2*padding}"/>
-        <rect class="work" x="{BOUNDS["left"]}" y="{-BOUNDS["top"]}" width="{w}" height="{h}" stroke-width="1"/>
+                  style="width: 100%; height: 480px; border: 1px solid #3a3b40; border-radius: 4px; background: #2a2b30;">
+        <rect fill="#2a2b30" x="{BOUNDS["left"] - padding}" y="{-BOUNDS["top"] - padding}" width="{w + 2*padding}" height="{h + 2*padding}"/>
+        <rect fill="#212226" stroke="#3a3b40" x="{BOUNDS["left"]}" y="{-BOUNDS["top"]}" width="{w}" height="{h}" stroke-width="1"/>
     '''
 
     for path in paths:
         if len(path) < 2:
             continue
         d = " ".join(f"{'M' if i == 0 else 'L'}{p[0]:.1f},{-p[1]:.1f}" for i, p in enumerate(path))
-        svg += f'<path class="stroke" d="{d}" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>'
+        svg += f'<path d="{d}" fill="none" stroke="#e8e8e8" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>'
 
     total_points = sum(len(p) for p in paths)
     svg += f'''
-        <text class="label" x="{BOUNDS["left"] + 8}" y="{-BOUNDS["top"] + 20}" font-family="monospace" font-size="12">
+        <text x="{BOUNDS["left"] + 8}" y="{-BOUNDS["top"] + 20}" font-family="monospace" font-size="12" fill="#666">
             {len(paths)} paths / {total_points} points
         </text>
     '''
@@ -833,35 +819,16 @@ def generate(prompt: str, temperature: float, max_tokens: int, num_steps: int, g
 css = """
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
 
-:root {
-    --bg: #ffffff;
-    --bg-secondary: #fafafa;
-    --text: #1a1a1a;
-    --text-secondary: #666;
-    --border: #e0e0e0;
-    --btn-bg: #f0f0f0;
-    --btn-hover: #e0e0e0;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #212226;
-        --bg-secondary: #2a2b30;
-        --text: #e8e8e8;
-        --text-secondary: #999;
-        --border: #3a3b40;
-        --btn-bg: #3a3b40;
-        --btn-hover: #4a4b50;
-    }
-}
-
+/* Force dark mode everywhere */
 * {
     font-family: 'IBM Plex Mono', monospace !important;
 }
 
-body, .gradio-container {
-    background: var(--bg) !important;
-    color: var(--text) !important;
+html, body, .gradio-container, .main, .wrap, .contain, 
+#component-0, .app, [class*="container"], [class*="wrapper"] {
+    background: #212226 !important;
+    background-color: #212226 !important;
+    color: #e8e8e8 !important;
 }
 
 .gradio-container {
@@ -869,57 +836,173 @@ body, .gradio-container {
     margin: auto;
 }
 
-.gr-button {
-    background: var(--btn-bg) !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    font-weight: 500 !important;
+/* All text elements */
+h1, h2, h3, h4, p, span, label, .label-wrap, .label-text,
+[class*="label"], [class*="markdown"], .prose, .prose * {
+    color: #e8e8e8 !important;
 }
 
-.gr-button:hover {
-    background: var(--btn-hover) !important;
+/* Secondary/muted text */
+.secondary, .muted, small, .info, .description {
+    color: #999 !important;
 }
 
-.gr-examples {
-    margin-top: 8px !important;
+/* Input elements */
+input, textarea, select, .input-text, .textbox,
+input[type="text"], input[type="number"],
+[class*="textbox"], [class*="input"] {
+    background: #2a2b30 !important;
+    background-color: #2a2b30 !important;
+    color: #e8e8e8 !important;
+    border: 1px solid #3a3b40 !important;
+    border-radius: 4px !important;
 }
 
-footer {
-    display: none !important;
+input::placeholder, textarea::placeholder {
+    color: #666 !important;
 }
 
-h1, h2, h3, p, span, label {
-    color: var(--text) !important;
+/* Panels, boxes, accordions */
+.panel, .box, .form, .block, .accordion,
+[class*="panel"], [class*="box"], [class*="accordion"],
+[class*="block"], [class*="group"], .gr-group {
+    background: #2a2b30 !important;
+    background-color: #2a2b30 !important;
+    border: 1px solid #3a3b40 !important;
+    border-radius: 4px !important;
 }
 
-.gr-box, .gr-panel, .gr-form {
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 4px !important;
+/* Code blocks */
+code, pre, .code, [class*="code"] {
+    background: #2a2b30 !important;
+    background-color: #2a2b30 !important;
+    color: #e8e8e8 !important;
+    border: 1px solid #3a3b40 !important;
 }
 
-input, textarea {
-    background: var(--bg) !important;
-    color: var(--text) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 4px !important;
+/* Buttons */
+button, .button, .btn, [class*="button"], [class*="btn"] {
+    background: #3a3b40 !important;
+    background-color: #3a3b40 !important;
+    border: 1px solid #4a4b50 !important;
+    color: #e8e8e8 !important;
+    font-weight: 500 !important;
+}
+
+button:hover, .button:hover, .btn:hover {
+    background: #4a4b50 !important;
+    background-color: #4a4b50 !important;
+}
+
+/* Generate button - accent */
+.primary, [class*="primary"] {
+    background: #4a4b50 !important;
+    background-color: #4a4b50 !important;
+}
+
+/* Examples */
+.examples, [class*="example"] {
+    background: transparent !important;
+}
+
+.examples button, [class*="example"] button {
+    background: #2a2b30 !important;
+    border: 1px solid #3a3b40 !important;
 }
 
-.gr-accordion {
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--border) !important;
+/* Sliders */
+input[type="range"], .range, [class*="slider"] {
+    background: #3a3b40 !important;
 }
 
-a {
-    color: var(--text-secondary) !important;
+/* Links */
+a, a:visited {
+    color: #999 !important;
 }
 
 a:hover {
-    color: var(--text) !important;
+    color: #e8e8e8 !important;
+}
+
+/* Borders and dividers */
+hr, .divider, [class*="divider"] {
+    border-color: #3a3b40 !important;
+}
+
+/* Hide footer */
+footer {
+    display: none !important;
+}
+
+/* Dropdown menus */
+.dropdown, [class*="dropdown"], .menu, [class*="menu"] {
+    background: #2a2b30 !important;
+    border: 1px solid #3a3b40 !important;
+}
+
+/* Tabs */
+.tab, [class*="tab"] {
+    background: #2a2b30 !important;
+    color: #e8e8e8 !important;
+}
+
+/* Number inputs */
+input[type="number"] {
+    background: #2a2b30 !important;
+    color: #e8e8e8 !important;
+}
+
+/* Make sure accordion headers are visible */
+.accordion-header, summary, [class*="accordion"] > * {
+    color: #e8e8e8 !important;
 }
 """
 
-with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
+# Create dark theme
+dark_theme = gr.themes.Base(
+    primary_hue="gray",
+    secondary_hue="gray",
+    neutral_hue="gray",
+).set(
+    body_background_fill="#212226",
+    body_background_fill_dark="#212226",
+    body_text_color="#e8e8e8",
+    body_text_color_dark="#e8e8e8",
+    background_fill_primary="#212226",
+    background_fill_primary_dark="#212226",
+    background_fill_secondary="#2a2b30",
+    background_fill_secondary_dark="#2a2b30",
+    block_background_fill="#2a2b30",
+    block_background_fill_dark="#2a2b30",
+    block_border_color="#3a3b40",
+    block_border_color_dark="#3a3b40",
+    block_label_background_fill="#2a2b30",
+    block_label_background_fill_dark="#2a2b30",
+    block_label_text_color="#e8e8e8",
+    block_label_text_color_dark="#e8e8e8",
+    block_title_text_color="#e8e8e8",
+    block_title_text_color_dark="#e8e8e8",
+    input_background_fill="#2a2b30",
+    input_background_fill_dark="#2a2b30",
+    input_border_color="#3a3b40",
+    input_border_color_dark="#3a3b40",
+    input_placeholder_color="#666666",
+    input_placeholder_color_dark="#666666",
+    button_primary_background_fill="#3a3b40",
+    button_primary_background_fill_dark="#3a3b40",
+    button_primary_text_color="#e8e8e8",
+    button_primary_text_color_dark="#e8e8e8",
+    button_secondary_background_fill="#3a3b40",
+    button_secondary_background_fill_dark="#3a3b40",
+    button_secondary_text_color="#e8e8e8",
+    button_secondary_text_color_dark="#e8e8e8",
+    border_color_primary="#3a3b40",
+    border_color_primary_dark="#3a3b40",
+    color_accent="#4a4b50",
+    color_accent_dark="#4a4b50",
+)
+
+with gr.Blocks(css=css, theme=dark_theme) as demo:
     gr.Markdown("# dcode")
     gr.Markdown("text → polargraph gcode via stable diffusion")