Upload semantic_analyzer.py

agents/semantic_analyzer.py

@@ -629,11 +629,15 @@ def generate_semantic_preview_html(analysis_result: dict) -> str:
     # Handle empty or invalid result
     if not analysis_result:
         return '''
-        <div style="padding: 40px; text-align: center; background: #fff3cd !important; border-radius: 8px; border: 1px solid #ffc107;">
-            <p style="color: #856404 !important; font-size: 14px; margin: 0;">
+        <div class="sem-warning-box" style="padding: 40px; text-align: center; background: #fff3cd; border-radius: 8px; border: 1px solid #ffc107;">
+            <p style="color: #856404; font-size: 14px; margin: 0;">
                 ⚠️ Semantic analysis did not produce results. Check the logs for errors.
             </p>
         </div>
+        <style>
+            .dark .sem-warning-box { background: #422006 !important; border-color: #b45309 !important; }
+            .dark .sem-warning-box p { color: #fde68a !important; }
+        </style>
         '''
     
     def color_card(hex_val: str, role: str, confidence: str, reason: str = "") -> str:
@@ -704,11 +708,15 @@ def generate_semantic_preview_html(analysis_result: dict) -> str:
     # Check if any sections were created
     if not sections_html.strip():
         return '''
-        <div style="padding: 40px; text-align: center; background: #fff3cd !important; border-radius: 8px; border: 1px solid #ffc107;">
-            <p style="color: #856404 !important; font-size: 14px; margin: 0;">
+        <div class="sem-warning-box" style="padding: 40px; text-align: center; background: #fff3cd; border-radius: 8px; border: 1px solid #ffc107;">
+            <p style="color: #856404; font-size: 14px; margin: 0;">
                 ⚠️ No semantic color categories were detected. The colors may not have enough context data (elements, CSS properties) for classification.
             </p>
         </div>
+        <style>
+            .dark .sem-warning-box { background: #422006 !important; border-color: #b45309 !important; }
+            .dark .sem-warning-box p { color: #fde68a !important; }
+        </style>
         '''
     
     # Summary
@@ -866,6 +874,22 @@ def generate_semantic_preview_html(analysis_result: dict) -> str:
             color: #555 !important;
             margin-top: 4px;
         }}
+
+        /* Dark mode */
+        .dark .sem-preview {{ background: #0f172a !important; }}
+        .dark .sem-category-section {{ background: #1e293b !important; border-color: #475569 !important; }}
+        .dark .sem-category-title {{ color: #f1f5f9 !important; border-bottom-color: #475569 !important; }}
+        .dark .sem-color-card {{ background: #334155 !important; border-color: #475569 !important; }}
+        .dark .sem-color-details {{ background: #1e293b !important; }}
+        .dark .sem-role-name {{ color: #f1f5f9 !important; }}
+        .dark .sem-preview .confidence.high {{ background: #14532d !important; color: #86efac !important; }}
+        .dark .sem-preview .confidence.medium {{ background: #422006 !important; color: #fde68a !important; }}
+        .dark .sem-preview .confidence.low {{ background: #450a0a !important; color: #fca5a5 !important; }}
+        .dark .sem-summary-section {{ background: #1e293b !important; border-color: #475569 !important; }}
+        .dark .sem-summary-title {{ color: #f1f5f9 !important; }}
+        .dark .sem-stat {{ background: #334155 !important; }}
+        .dark .sem-stat-value {{ color: #f1f5f9 !important; }}
+        .dark .sem-stat-label {{ color: #94a3b8 !important; }}
     </style>
     
     <div class="sem-preview">