Update app.py

app.py

@@ -1167,8 +1167,8 @@ def create_chatbot():
     
     # Create CSS with theme variables
     custom_css = """
-        /* Theme variables - will be applied based on user's theme preference */
-        .light-theme {
+        /* Base variable definitions that work across themes */
+        :root {
             --primary-color: #4a6fa5;
             --secondary-color: #6c757d;
             --success-color: #28a745;
@@ -1183,41 +1183,21 @@ def create_chatbot():
             --info-box-bg: #e7f5fe;
         }
         
-        .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 */
+        /* Dark mode overrides */
         @media (prefers-color-scheme: dark) {
-            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);
+            :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 */
             }
         }
         
@@ -1358,43 +1338,42 @@ def create_chatbot():
         }
     """
     
-    # JavaScript to detect and apply theme
+    # JavaScript to detect and apply theme - simplified version without manual toggle
     theme_script = """
     <script>
-        // Function to detect and apply theme
-        function applyTheme() {
-            // Check if user has a saved preference
-            const savedTheme = localStorage.getItem('preferredTheme');
-            
-            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');
-                }
+        // 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';
+                });
             }
             
-            // 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);
-        }
+            // Run once on load
+            updateElementsForTheme();
+            
+            // Also update when system theme changes
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateElementsForTheme);
+        });
     </script>
     """
     
@@ -1515,70 +1494,6 @@ 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