Support dynamic light/dark theme switching

app.py

@@ -610,20 +610,32 @@ 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 #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"/>
+                  style="width: 100%; height: 480px; border-radius: 4px;">
+        <style>
+            .svg-bg {{ fill: #fafafa; }}
+            .svg-work {{ fill: #ffffff; stroke: #e0e0e0; }}
+            .svg-stroke {{ stroke: #1a1a1a; }}
+            .svg-label {{ fill: #999; }}
+            @media (prefers-color-scheme: dark) {{
+                .svg-bg {{ fill: #2a2b30; }}
+                .svg-work {{ fill: #212226; stroke: #3a3b40; }}
+                .svg-stroke {{ stroke: #e8e8e8; }}
+                .svg-label {{ fill: #666; }}
+            }}
+        </style>
+        <rect class="svg-bg" x="{BOUNDS["left"] - padding}" y="{-BOUNDS["top"] - padding}" width="{w + 2*padding}" height="{h + 2*padding}"/>
+        <rect class="svg-work" 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 d="{d}" fill="none" stroke="#e8e8e8" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>'
+        svg += f'<path class="svg-stroke" d="{d}" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>'
 
     total_points = sum(len(p) for p in paths)
     svg += f'''
-        <text x="{BOUNDS["left"] + 8}" y="{-BOUNDS["top"] + 20}" font-family="monospace" font-size="12" fill="#666">
+        <text class="svg-label" x="{BOUNDS["left"] + 8}" y="{-BOUNDS["top"] + 20}" font-family="monospace" font-size="12">
             {len(paths)} paths / {total_points} points
         </text>
     '''
@@ -819,188 +831,65 @@ 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');
 
-/* Force dark mode everywhere */
 * {
     font-family: 'IBM Plex Mono', monospace !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 {
     max-width: 900px !important;
     margin: auto;
 }
 
-/* All text elements */
-h1, h2, h3, h4, p, span, label, .label-wrap, .label-text,
-[class*="label"], [class*="markdown"], .prose, .prose * {
-    color: #e8e8e8 !important;
-}
-
-/* Secondary/muted text */
-.secondary, .muted, small, .info, .description {
-    color: #999 !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;
-}
-
-input::placeholder, textarea::placeholder {
-    color: #666 !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;
-}
-
-/* Code blocks */
-code, pre, .code, [class*="code"] {
-    background: #2a2b30 !important;
-    background-color: #2a2b30 !important;
-    color: #e8e8e8 !important;
-    border: 1px solid #3a3b40 !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;
-}
-
-/* Sliders */
-input[type="range"], .range, [class*="slider"] {
-    background: #3a3b40 !important;
-}
-
-/* Links */
-a, a:visited {
-    color: #999 !important;
-}
-
-a:hover {
-    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;
-}
 """
 
-# Create dark theme
-dark_theme = gr.themes.Base(
+# Create theme with proper light/dark mode support
+theme = gr.themes.Base(
     primary_hue="gray",
     secondary_hue="gray",
     neutral_hue="gray",
 ).set(
-    body_background_fill="#212226",
+    # Light mode
+    body_background_fill="#ffffff",
+    body_text_color="#1a1a1a",
+    background_fill_primary="#ffffff",
+    background_fill_secondary="#fafafa",
+    block_background_fill="#fafafa",
+    block_border_color="#e0e0e0",
+    block_label_background_fill="#fafafa",
+    block_label_text_color="#1a1a1a",
+    block_title_text_color="#1a1a1a",
+    input_background_fill="#ffffff",
+    input_border_color="#e0e0e0",
+    input_placeholder_color="#999999",
+    button_primary_background_fill="#f0f0f0",
+    button_primary_text_color="#1a1a1a",
+    button_secondary_background_fill="#f0f0f0",
+    button_secondary_text_color="#1a1a1a",
+    border_color_primary="#e0e0e0",
+    # Dark mode
     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",
 )
 
-with gr.Blocks(css=css, theme=dark_theme) as demo:
+with gr.Blocks(css=css, theme=theme) as demo:
     gr.Markdown("# dcode")
     gr.Markdown("text → polargraph gcode via stable diffusion")