Update main.py

main.py

@@ -136,6 +136,115 @@ def proxy(path):
                 button['style'] = 'display: inline-block; margin: 10px; padding: 8px 15px; background-color: #4a90e2; border: none; border-radius: 4px; text-decoration: none; color: white; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'
                 img.insert_after(button)
 
+            # Add theme toggle button
+            theme_toggle = soup.new_tag('button')
+            theme_toggle['id'] = 'themeToggle'
+            theme_toggle['style'] = 'position: fixed; top: 20px; right: 20px; padding: 10px; border-radius: 50%; width: 40px; height: 40px; border: none; cursor: pointer; z-index: 1000; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;'
+            theme_toggle.string = '🌓'
+            if soup.body:
+                soup.body.insert(0, theme_toggle)
+
+            # Add theme styles
+            style_tag = soup.new_tag('style')
+            style_tag.string = '''
+                :root {
+                    --bg-color: #ffffff;
+                    --text-color: #333333;
+                    --link-color: #4a90e2;
+                    --border-color: #ddd;
+                    --shadow-color: rgba(0,0,0,0.1);
+                    --button-bg: #4a90e2;
+                    --button-text: white;
+                    --modal-bg: rgba(0,0,0,0.8);
+                }
+                
+                [data-theme="dark"] {
+                    --bg-color: #1a1a1a;
+                    --text-color: #e0e0e0;
+                    --link-color: #66b3ff;
+                    --border-color: #404040;
+                    --shadow-color: rgba(0,0,0,0.3);
+                    --button-bg: #2d5a8c;
+                    --button-text: #ffffff;
+                    --modal-bg: rgba(0,0,0,0.9);
+                }
+                
+                body {
+                    background-color: var(--bg-color);
+                    color: var(--text-color);
+                    transition: all 0.3s ease;
+                }
+                
+                a {
+                    color: var(--link-color);
+                }
+                
+                img {
+                    border-color: var(--border-color) !important;
+                    box-shadow: 0 2px 4px var(--shadow-color) !important;
+                }
+                
+                .open-image-btn {
+                    background-color: var(--button-bg) !important;
+                    color: var(--button-text) !important;
+                }
+                
+                #themeToggle {
+                    background-color: var(--bg-color);
+                    color: var(--text-color);
+                    box-shadow: 0 2px 4px var(--shadow-color);
+                }
+                
+                .modal {
+                    background-color: var(--modal-bg);
+                }
+                
+                .zoom-controls button {
+                    background-color: var(--button-bg);
+                    color: var(--button-text);
+                    border: 1px solid var(--border-color);
+                }
+            '''
+            if soup.head:
+                soup.head.append(style_tag)
+            else:
+                head_tag = soup.new_tag('head')
+                head_tag.append(style_tag)
+                if soup.html:
+                    soup.html.insert(0, head_tag)
+                else:
+                    html_tag = soup.new_tag('html')
+                    html_tag.append(head_tag)
+                    soup.append(html_tag)
+
+            # Add JavaScript for theme toggle
+            script_tag = soup.new_tag('script')
+            script_tag.string = '''
+                document.addEventListener('DOMContentLoaded', function() {
+                    const themeToggle = document.getElementById('themeToggle');
+                    const savedTheme = localStorage.getItem('theme');
+                    
+                    if (savedTheme === 'dark') {
+                        document.documentElement.setAttribute('data-theme', 'dark');
+                    }
+                    
+                    themeToggle.addEventListener('click', function() {
+                        const currentTheme = document.documentElement.getAttribute('data-theme');
+                        const newTheme = currentTheme === 'dark' ? null : 'dark';
+                        
+                        if (newTheme) {
+                            document.documentElement.setAttribute('data-theme', newTheme);
+                            localStorage.setItem('theme', newTheme);
+                        } else {
+                            document.documentElement.removeAttribute('data-theme');
+                            localStorage.removeItem('theme');
+                        }
+                    });
+                });
+            '''
+            if soup.body:
+                soup.body.append(script_tag)
+            
             # Add modal container for fullscreen image view
             modal_div = soup.new_tag('div')
             modal_div['id'] = 'imageModal'