Update ui/components.py

ui/components.py

@@ -382,6 +382,87 @@ def get_custom_css():
     .quiz-result-output {
         margin-top: 2em;
     }
+
+    /* Dark Mode Adjustments */
+    @media (prefers-color-scheme: dark) {
+        .main-container {
+            background: rgba(40, 40, 40, 0.95);
+            color: #e0e0e0;
+            border: 1px solid rgba(70, 70, 70, 0.2);
+        }
+        .header-section {
+            background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        .query-container {
+            background: linear-gradient(135deg, #303030 0%, #252525 100%);
+            border: 2px solid #555;
+        }
+        .response-container {
+            background: linear-gradient(135deg, #252525 0%, #303030 100%);
+            border: 2px solid #666;
+        }
+        .stats-container {
+            background: linear-gradient(135deg, #353535 0%, #404040 100%);
+            border-left: 5px solid #666;
+        }
+        .example-scenario-btn {
+            background-color: #333;
+            border: 1px solid #555;
+            color: #e0e0e0;
+        }
+        .quiz-container {
+            background: linear-gradient(135deg, #303030 0%, #252525 100%);
+            border: 2px solid #666;
+        }
+        .quiz-question {
+            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
+            border-left: 5px solid #666;
+            color: #e0e0e0;
+        }
+        .quiz-option {
+            background: linear-gradient(135deg, #2a2a2a 0%, #353535 100%);
+            border: 2px solid #444;
+            color: #e0e0e0;
+        }
+        .quiz-option:hover {
+            border-color: #888;
+        }
+        .quiz-option.selected {
+            background: linear-gradient(135deg, #555 0%, #666 100%);
+            border-color: #777;
+        }
+        .quiz-results {
+            background: linear-gradient(135deg, #303030 0%, #252525 100%);
+            border-left: 5px solid #888;
+        }
+        .quiz-result-item {
+            background: #333;
+            border-left: 4px solid #666;
+            color: #e0e0e0;
+        }
+        .quiz-result-correct {
+            border-left-color: #4CAF50 !important;
+            background: linear-gradient(135deg, #2d4d2d 0%, #3a3a3a 100%) !important;
+        }
+        .quiz-result-incorrect {
+            border-left-color: #e74c3c !important;
+            background: linear-gradient(135deg, #4d2d2d 0%, #3a3a3a 100%) !important;
+        }
+        .quiz-feedback {
+            background: linear-gradient(135deg, #3a3a3a 0%, #404040 100%);
+            border-left: 3px solid #4CAF50;
+            color: #a0a0a0;
+        }
+        .quiz-header {
+            background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
+        }
+        .quiz-progress {
+            background: #3a3a3a;
+            border: 2px solid #555;
+            color: #a0a0a0;
+        }
+    }
     
 
     """
@@ -574,3 +655,8 @@ def gradio_show_response(response: str, metadata: dict, safety: dict):
 
     return response_text, metadata_display, safety_display
 
+
+
+
+    
+