Added dark mode support

app.py

@@ -147,6 +147,89 @@ summary:hover {
         width: 100%;
     }
 }
+.dark {
+    /* General styles */
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+
+    /* Card styles */
+    .card {
+        background-color: #2a2a2a;
+        border-color: #444;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    }
+    .card:hover {
+        box-shadow: 0 6px 8px rgba(0,0,0,0.4);
+    }
+    .card-title {
+        color: #fff;
+        border-bottom-color: #444;
+    }
+
+    /* Question styles */
+    .question {
+        background-color: #333;
+    }
+    .question h3 {
+        color: #e0e0e0;
+    }
+    .question-yes {
+        background-color: #1a3a1a;
+    }
+    .question-no {
+        background-color: #3a1a1a;
+    }
+    .question-na {
+        background-color: #3a3a1a;
+    }
+
+    /* Summary and details styles */
+    summary {
+        color: #3498db;
+    }
+    details {
+        background-color: #2a2a2a;
+    }
+
+    /* Score styles */
+    .category-score, .total-score {
+        background-color: #2c3e50;
+        border-color: #34495e;
+    }
+    .total-score {
+        background-color: #34495e;
+        border-color: #2c3e50;
+    }
+
+    /* Leaderboard styles */
+    .leaderboard-table th {
+        background-color: #2c3e50;
+        color: #fff;
+    }
+    .leaderboard-table td {
+        border-bottom-color: #444;
+    }
+
+    /* Gradio component styles */
+    .gradio-container {
+        background-color: #1a1a1a;
+    }
+    .input-group, .output-group {
+        background-color: #2a2a2a;
+    }
+    input, select, textarea {
+        background-color: #333;
+        color: #e0e0e0;
+        border-color: #444;
+    }
+    button {
+        background-color: #3498db;
+        color: #fff;
+    }
+    button:hover {
+        background-color: #2980b9;
+    }
+}
 """
 
 def create_leaderboard():