Update app.py

app.py

@@ -342,7 +342,6 @@ class FontMoodGenerator:
         
         css_code = f"""/* Generated Font Palette CSS */
 {font_imports}
-
 /* Font Variables */
 :root {{"""
         
@@ -354,7 +353,6 @@ class FontMoodGenerator:
         
         css_code += """
 }
-
 /* Usage Examples */
 .heading { font-family: var(--font-1); }
 .body-text { font-family: var(--font-2); }
@@ -604,7 +602,7 @@ def create_ui(generator: FontMoodGenerator):
                     outputs=[palette_html_hidden, font_data_hidden, theme_css_hidden, theme_css_display, walkthrough]
                 )
 
-        # Static CSS for font cards (always loaded)
+        # Static CSS for font cards with DARK THEME SUPPORT
         gr.HTML("""
             <style>
                 .font-palette-container {
@@ -612,9 +610,10 @@ def create_ui(generator: FontMoodGenerator):
                     align-items: center; width: 100%;
                 }
                 .font-card {
-                    border: 2px solid #e0e0e0; border-radius: 8px;
+                    border: 2px solid var(--border-color-primary, #e0e0e0); 
+                    border-radius: 8px;
                     padding: 10px; width: 90%; max-width: 600px;
-                    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+                    background: var(--background-fill-primary, #ffffff);
                     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
                     transition: all 0.3s ease;
                 }
@@ -627,7 +626,9 @@ def create_ui(generator: FontMoodGenerator):
                     align-items: center; margin-bottom: 8px;
                 }
                 .font-header h3 {
-                    margin: 0; color: #2c3e50; font-size: 1.1em;
+                    margin: 0; 
+                    color: var(--body-text-color, #2c3e50); 
+                    font-size: 1.1em;
                 }
                 .font-score {
                     background: #3498db; color: white; padding: 3px 6px;
@@ -635,19 +636,84 @@ def create_ui(generator: FontMoodGenerator):
                 }
                 .font-sample {
                     font-size: 18px; line-height: 1.2; margin: 8px 0;
-                    padding: 8px; background: #f8f9fa; border-radius: 6px;
-                    border-left: 3px solid #3498db; color: #2c3e50;
+                    padding: 8px; 
+                    background: var(--background-fill-secondary, #f8f9fa); 
+                    border-radius: 6px;
+                    border-left: 3px solid #3498db; 
+                    color: var(--body-text-color, #2c3e50);
                     min-height: 30px; display: flex; align-items: center;
                 }
                 .font-details {
                     display: flex; flex-direction: column; gap: 4px;
                 }
                 .font-family {
-                    font-weight: bold; color: #7f8c8d; font-size: 0.8em;
+                    font-weight: bold; 
+                    color: var(--body-text-color-subdued, #7f8c8d); 
+                    font-size: 0.8em;
                     text-transform: uppercase; letter-spacing: 1px;
                 }
                 .font-description {
-                    color: #5d6d7e; font-size: 0.85em; line-height: 1.3;
+                    color: var(--body-text-color-subdued, #5d6d7e); 
+                    font-size: 0.85em; line-height: 1.3;
+                }
+                
+                /* Dark theme fallback using media query */
+                @media (prefers-color-scheme: dark) {
+                    .font-card {
+                        border-color: #4a5568;
+                        background: #2d3748;
+                    }
+                    .font-header h3 {
+                        color: #e2e8f0;
+                    }
+                    .font-sample {
+                        background: #4a5568;
+                        color: #e2e8f0;
+                    }
+                    .font-family {
+                        color: #a0aec0;
+                    }
+                    .font-description {
+                        color: #cbd5e0;
+                    }
+                }
+                
+                /* Additional Gradio dark theme support */
+                .dark .font-card {
+                    border-color: #4a5568;
+                    background: #2d3748;
+                }
+                .dark .font-header h3 {
+                    color: #e2e8f0;
+                }
+                .dark .font-sample {
+                    background: #4a5568;
+                    color: #e2e8f0;
+                }
+                .dark .font-family {
+                    color: #a0aec0;
+                }
+                .dark .font-description {
+                    color: #cbd5e0;
+                }
+                
+                /* Force text colors for better compatibility */
+                html[data-theme="dark"] .font-card {
+                    border-color: #4a5568 !important;
+                    background: #2d3748 !important;
+                }
+                html[data-theme="dark"] .font-header h3 {
+                    color: #e2e8f0 !important;
+                }
+                html[data-theme="dark"] .font-sample {
+                    background: #4a5568 !important;
+                    color: #e2e8f0 !important;
+                }
+                html[data-theme="dark"] .font-family {
+                    color: #a0aec0 !important;
+                }
+                html[data-theme="dark"] .font-description {
+                    color: #cbd5e0 !important;
                 }
             </style>
         """)