Update app.py

app.py

@@ -939,8 +939,6 @@ def format_project_ideas(ideas):
     
     return result
 
-# Missing function implementations
-
 # Dictionary to store user profiles by session ID
 user_profiles = {}
 
@@ -1167,8 +1165,8 @@ def create_chatbot():
     
     # Create CSS with theme variables
     custom_css = """
-        /* Base variable definitions that work across themes */
-        :root {
+        /* Theme variables - will be applied based on user's theme preference */
+        .light-theme {
             --primary-color: #4a6fa5;
             --secondary-color: #6c757d;
             --success-color: #28a745;
@@ -1183,21 +1181,41 @@ def create_chatbot():
             --info-box-bg: #e7f5fe;
         }
         
-        /* Dark mode overrides */
+        .dark-theme {
+            --primary-color: #5b88c7;
+            --secondary-color: #adb5bd;
+            --success-color: #48c774;
+            --bg-color: #1a1a1a;
+            --text-color: #f1f1f1;
+            --card-bg: #2d2d2d;
+            --card-border: #444444;
+            --input-bg: #333333;
+            --highlight-color: #193652;
+            --accent-color: #3291ff;
+            --completed-color: #204829;
+            --info-box-bg: #193652;
+        }
+        
+        /* Automatically detect theme preference and apply appropriate theme class */
         @media (prefers-color-scheme: dark) {
-            :root {
-                --primary-color: #5b88c7;      /* Lighter blue for better visibility */
-                --secondary-color: #adb5bd;    /* Lighter gray for better visibility */
-                --success-color: #48c774;      /* Brighter green for dark mode */
-                --bg-color: #1a1a1a;           /* Dark background */
-                --text-color: #f1f1f1;         /* Light text for dark backgrounds */
-                --card-bg: #2d2d2d;            /* Dark card background */
-                --card-border: #444444;        /* Dark border */
-                --input-bg: #333333;           /* Dark input background */
-                --highlight-color: #193652;    /* Dark highlight */
-                --accent-color: #3291ff;       /* Bright accent */
-                --completed-color: #204829;    /* Dark green for completed */
-                --info-box-bg: #193652;        /* Dark info box */
+            body {
+                color-scheme: dark;
+            }
+            
+            body:not(.light-theme):not(.force-light) {
+                background-color: var(--bg-color);
+                color: var(--text-color);
+            }
+        }
+        
+        @media (prefers-color-scheme: light) {
+            body {
+                color-scheme: light;
+            }
+            
+            body:not(.dark-theme):not(.force-dark) {
+                background-color: var(--bg-color);
+                color: var(--text-color);
             }
         }
         
@@ -1338,42 +1356,43 @@ def create_chatbot():
         }
     """
     
-    # JavaScript to detect and apply theme - simplified version without manual toggle
+    # JavaScript to detect and apply theme
     theme_script = """
     <script>
-        // Simple script to ensure proper theme handling on Hugging Face
-        document.addEventListener('DOMContentLoaded', function() {
-            // Force update of any elements that might not respect theme automatically
-            function updateElementsForTheme() {
-                const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-                
-                // Force any specific elements that might need extra help
-                const codeBlocks = document.querySelectorAll('pre code');
-                codeBlocks.forEach(block => {
-                    block.style.color = isDarkMode ? '#f1f1f1' : '#212529';
-                    block.style.backgroundColor = isDarkMode ? '#2d2d2d' : '#f8f9fa';
-                });
-                
-                // Ensure markdown-rendered content is visible
-                const markdownContent = document.querySelectorAll('.prose *');
-                markdownContent.forEach(element => {
-                    // Skip elements that already have specific styling
-                    if (element.tagName === 'A' || 
-                        element.tagName.match(/^H[1-6]$/) || 
-                        element.tagName === 'CODE') {
-                        return;
-                    }
-                    
-                    element.style.color = isDarkMode ? '#f1f1f1' : '#212529';
-                });
-            }
+        // Function to detect and apply theme
+        function applyTheme() {
+            // Check if user has a saved preference
+            const savedTheme = localStorage.getItem('preferredTheme');
             
-            // Run once on load
-            updateElementsForTheme();
+            if (savedTheme) {
+                // Apply saved preference
+                document.body.classList.add(savedTheme + '-theme');
+            } else {
+                // Check system preference
+                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.body.classList.add('dark-theme');
+                } else {
+                    document.body.classList.add('light-theme');
+                }
+            }
             
-            // Also update when system theme changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateElementsForTheme);
-        });
+            // Listen for theme changes
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                // Only apply if no saved preference
+                if (!savedTheme) {
+                    document.body.classList.remove('light-theme', 'dark-theme');
+                    document.body.classList.add(event.matches ? 'dark-theme' : 'light-theme');
+                }
+            });
+        }
+        
+        // Apply theme when DOM is loaded
+        document.addEventListener('DOMContentLoaded', applyTheme);
+        
+        // For Gradio that might load content dynamically
+        if (document.readyState === 'complete' || document.readyState === 'interactive') {
+            setTimeout(applyTheme, 1);
+        }
     </script>
     """
     
@@ -1494,6 +1513,70 @@ def create_chatbot():
                     
                     generate_plan_btn = gr.Button("Generate Study Plan", variant="primary")
                     plan_output = gr.Markdown(label="Personalized Study Plan")
+            
+            # Theme Selector Tab (New)
+            with gr.Tab("Settings"):
+                with gr.Column(elem_classes=["card"]):
+                    gr.HTML("<h3>App Settings</h3>")
+                    
+                    theme_selector = gr.Radio(
+                        choices=["System Default", "Light Theme", "Dark Theme"],
+                        label="Theme Preference",
+                        value="System Default"
+                    )
+                    
+                    # Add JavaScript to handle theme changes
+                    theme_js = """
+                    <script>
+                        // Get the radio input once it exists
+                        function setupThemeSelector() {
+                            const radioInputs = document.querySelectorAll('input[type="radio"][name="theme"]');
+                            if (radioInputs.length === 0) {
+                                setTimeout(setupThemeSelector, 300);
+                                return;
+                            }
+                            
+                            // Set initial value based on stored preference
+                            const savedTheme = localStorage.getItem('preferredTheme');
+                            if (savedTheme === 'light') {
+                                radioInputs[1].checked = true;
+                            } else if (savedTheme === 'dark') {
+                                radioInputs[2].checked = true;
+                            } else {
+                                radioInputs[0].checked = true;
+                            }
+                            
+                            // Add event listeners
+                            radioInputs.forEach(input => {
+                                input.addEventListener('change', function() {
+                                    const body = document.body;
+                                    body.classList.remove('light-theme', 'dark-theme', 'force-light', 'force-dark');
+                                    
+                                    if (this.value === "Light Theme") {
+                                        body.classList.add('light-theme', 'force-light');
+                                        localStorage.setItem('preferredTheme', 'light');
+                                    } else if (this.value === "Dark Theme") {
+                                        body.classList.add('dark-theme', 'force-dark');
+                                        localStorage.setItem('preferredTheme', 'dark');
+                                    } else {
+                                        localStorage.removeItem('preferredTheme');
+                                        applyTheme(); // Reapply system theme
+                                    }
+                                });
+                            });
+                        }
+                        
+                        // Start setup
+                        setupThemeSelector();
+                    </script>
+                    """
+                    gr.HTML(theme_js)
+                    
+                    gr.HTML("""
+                    <div class="info-box">
+                        <p>These settings will be saved in your browser for future visits.</p>
+                    </div>
+                    """)
         
         gr.HTML("""<div class="footer">
             AI Teaching Assistant | Version 2.0 | © 2025 | Powered by Groq AI