Update app.py

app.py

@@ -1131,85 +1131,135 @@ def add_agentic_ai_info():
 def create_chatbot():
     """Create the Gradio interface for the chatbot"""
     # Generate a random session ID for the user
+    import uuid
     session_id = str(uuid.uuid4())
     
-    # Define theme colors and styling
-    primary_color = "#4a6fa5"
-    secondary_color = "#6c757d"
-    success_color = "#28a745"
-    light_color = "#f8f9fa"
-    dark_color = "#343a40"
-    
-    custom_css = f"""
-        :root {{
-            --primary-color: {primary_color};
-            --secondary-color: {secondary_color};
-            --success-color: {success_color};
-            --light-color: {light_color};
-            --dark-color: {dark_color};
-        }}
-        .gradio-container {{ 
-            background-color: var(--light-color); 
+    # Define theme colors and styling with support for both light and dark themes
+    custom_css = """
+        :root {
+            /* Light theme variables (default) */
+            --background-color: #f8f9fa;
+            --card-background: #ffffff;
+            --text-color: #343a40;
+            --secondary-text-color: #6c757d;
+            --primary-color: #4a6fa5;
+            --secondary-color: #6c757d;
+            --success-color: #28a745;
+            --border-color: #dee2e6;
+            --shadow-color: rgba(0,0,0,0.08);
+            --info-background: #e7f5fe;
+            --progress-background: #e9ecef;
+            --completed-background: #d4edda;
+        }
+        
+        /* Dark theme preferences */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #121212;
+                --card-background: #1e1e1e;
+                --text-color: #e0e0e0;
+                --secondary-text-color: #adb5bd;
+                --primary-color: #5d87c6;  /* Lighter shade for dark mode */
+                --secondary-color: #8b959e;
+                --success-color: #3cb054;
+                --border-color: #495057;
+                --shadow-color: rgba(0,0,0,0.2);
+                --info-background: #2b3f54;
+                --progress-background: #343a40;
+                --completed-background: #255c33;
+            }
+        }
+        
+        .gradio-container { 
+            background-color: var(--background-color); 
             font-family: 'Inter', 'Segoe UI', sans-serif; 
-        }}
-        #title {{ 
+            color: var(--text-color);
+        }
+        
+        #title { 
             font-size: 32px; 
             font-weight: bold; 
             text-align: center; 
             padding-top: 20px; 
             color: var(--primary-color);
             margin-bottom: 0;
-        }}
-        #subtitle {{ 
+        }
+        
+        #subtitle { 
             font-size: 18px; 
             text-align: center; 
             margin-bottom: 20px; 
-            color: var(--secondary-color); 
-        }}
-        .card {{
-            background-color: white;
+            color: var(--secondary-text-color); 
+        }
+        
+        .card {
+            background-color: var(--card-background);
             padding: 20px;
             border-radius: 12px;
-            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+            box-shadow: 0 4px 10px var(--shadow-color);
             margin-bottom: 20px;
-        }}
-        .tabs {{
+            color: var(--text-color);
+        }
+        
+        .tabs {
             margin-top: 20px;
-        }}
-        .gr-button-primary {{ 
+        }
+        
+        .gr-button-primary { 
             background-color: var(--primary-color) !important; 
-        }}
-        .gr-button-secondary {{ 
+        }
+        
+        .gr-button-secondary { 
             background-color: var(--secondary-color) !important; 
-        }}
-        .gr-button-success {{ 
+        }
+        
+        .gr-button-success { 
             background-color: var(--success-color) !important; 
-        }}
-        .footer {{
+        }
+        
+        .footer {
             text-align: center;
             margin-top: 30px;
             padding: 10px;
             font-size: 14px;
-            color: var(--secondary-color);
-        }}
-        .progress-module {{
+            color: var(--secondary-text-color);
+        }
+        
+        .progress-module {
             padding: 10px;
             margin: 5px 0;
             border-radius: 5px;
-            background-color: #e9ecef;
-        }}
-        .progress-module.completed {{
-            background-color: #d4edda;
-        }}
-        .info-box {{
-            background-color: #e7f5fe;
+            background-color: var(--progress-background);
+            color: var(--text-color);
+        }
+        
+        .progress-module.completed {
+            background-color: var(--completed-background);
+        }
+        
+        .info-box {
+            background-color: var(--info-background);
             border-left: 4px solid var(--primary-color);
             padding: 15px;
             margin: 15px 0;
             border-radius: 4px;
-        }}
+            color: var(--text-color);
+        }
+        
+        /* Ensure contrast for Markdown content */
+        .markdown p, .markdown h1, .markdown h2, .markdown h3, .markdown h4 {
+            color: var(--text-color) !important;
+        }
+        
+        .markdown a {
+            color: var(--primary-color) !important;
+        }
+        
+        .markdown code {
+            background-color: var(--progress-background) !important;
+            color: var(--text-color) !important;
+        }
     """
-    
     with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="blue")) as demo:
         gr.HTML("<div id='title'>🎓 AI Teaching Assistant</div>")
         gr.HTML("<div id='subtitle'>Your personalized learning companion for Python, Data Science & AI</div>")