Update app.py

app.py

@@ -97,8 +97,128 @@ Format your answer with clear headings and subheadings. Use markdown formatting
     except Exception as e:
         return f"Error: {str(e)}"
 
-# Create a Gradio interface
-with gr.Blocks(title="Competitive Programming Assistant", theme=gr.themes.Soft()) as app:
+# Custom CSS for dark mode toggle and styling
+custom_css = """
+.dark-mode {
+    --color-background: #1a1a1a;
+    --color-text: #ffffff;
+    --color-border: #444444;
+    --color-accent: #3d85c6;
+    --color-input-background: #2d2d2d;
+    --color-button: #3d85c6;
+    --color-button-hover: #5699d8;
+}
+
+.light-mode {
+    --color-background: #ffffff;
+    --color-text: #333333;
+    --color-border: #dddddd;
+    --color-accent: #2e67a9;
+    --color-input-background: #f9f9f9;
+    --color-button: #2e67a9;
+    --color-button-hover: #4a7dbd;
+}
+
+body.dark-mode {
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+body.light-mode {
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+.theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 8px 16px;
+}
+
+.theme-toggle button {
+    background-color: var(--color-button);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.theme-toggle button:hover {
+    background-color: var(--color-button-hover);
+}
+
+.gradio-container {
+    background-color: var(--color-background) !important;
+    color: var(--color-text) !important;
+}
+
+.dark-mode .gradio-container textarea,
+.dark-mode .gradio-container input {
+    background-color: var(--color-input-background) !important;
+    color: var(--color-text) !important;
+    border-color: var(--color-border) !important;
+}
+
+.dark-mode .gradio-markdown {
+    color: var(--color-text) !important;
+}
+
+.dark-mode .gradio-button {
+    background-color: var(--color-button) !important;
+}
+
+.dark-mode .gradio-button:hover {
+    background-color: var(--color-button-hover) !important;
+}
+"""
+
+# JavaScript for theme toggle functionality
+theme_toggle_js = """
+function toggleTheme() {
+    const body = document.body;
+    if (body.classList.contains('light-mode')) {
+        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
+        localStorage.setItem('theme', 'dark');
+        document.getElementById('theme-toggle-btn').textContent = '☀️ Light Mode';
+    } else {
+        body.classList.remove('dark-mode');
+        body.classList.add('light-mode');
+        localStorage.setItem('theme', 'light');
+        document.getElementById('theme-toggle-btn').textContent = '🌙 Dark Mode';
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.body.classList.add(savedTheme + '-mode');
+    
+    const themeToggleBtn = document.getElementById('theme-toggle-btn');
+    if (themeToggleBtn) {
+        themeToggleBtn.textContent = savedTheme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
+        themeToggleBtn.addEventListener('click', toggleTheme);
+    }
+});
+"""
+
+# Create a Gradio interface with theme support
+with gr.Blocks(title="Competitive Programming Assistant", 
+               theme=gr.themes.Soft(), 
+               css=custom_css) as app:
+    
+    # Add JavaScript for theme toggle
+    gr.HTML(f"""
+    <script>
+    {theme_toggle_js}
+    </script>
+    <div class="theme-toggle">
+        <button id="theme-toggle-btn">🌙 Dark Mode</button>
+    </div>
+    """)
+    
     gr.Markdown("""
     # 🏆 Competitive Programming Assistant
     
@@ -169,6 +289,30 @@ with gr.Blocks(title="Competitive Programming Assistant", theme=gr.themes.Soft()
         inputs=[problem_input, language, api_key_input],
         outputs=solution_output
     )
+    
+    # Initialize theme based on user preference or system default
+    gr.HTML("""
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const savedTheme = localStorage.getItem('theme');
+            
+            if (savedTheme) {
+                document.body.classList.add(savedTheme + '-mode');
+                if (savedTheme === 'dark') {
+                    document.getElementById('theme-toggle-btn').textContent = '☀️ Light Mode';
+                }
+            } else if (prefersDarkMode) {
+                document.body.classList.add('dark-mode');
+                localStorage.setItem('theme', 'dark');
+                document.getElementById('theme-toggle-btn').textContent = '☀️ Light Mode';
+            } else {
+                document.body.classList.add('light-mode');
+                localStorage.setItem('theme', 'light');
+            }
+        });
+    </script>
+    """)
 
 # Launch the app
 if __name__ == "__main__":