Update app.py

app.py

@@ -246,7 +246,7 @@ def display_bookmarks():
         summary = bookmark.get('summary', '')
         category = bookmark.get('category', 'Uncategorized')
 
-        # Apply inline styles for dead links
+        # Apply inline styles using CSS variables
         if bookmark.get('dead_link'):
             card_style = "border: 2px solid var(--error-color);"
             text_style = "color: var(--error-color);"
@@ -453,105 +453,197 @@ Please identify the most relevant bookmarks that match the user's query. Provide
 def build_app():
     try:
         logger.info("Building Gradio app")
-        with gr.Blocks(css="""
-        /* Define CSS Variables for Themes */
-        :root {
-            --background-color: #FFFFFF;
-            --text-color: #000000;
-            --success-color: #4CAF50;
-            --error-color: #D32F2F;
-            --card-shadow: rgba(0, 0, 0, 0.2);
-        }
-
-        .dark-theme {
-            --background-color: #121212;
-            --text-color: #FFFFFF;
-            --success-color: #81C784;
-            --error-color: #E57373;
-            --card-shadow: rgba(255, 255, 255, 0.2);
-        }
-
-        body {
-            background-color: var(--background-color);
-            color: var(--text-color);
-        }
-
-        .card {
-            box-shadow: 0 4px 8px 0 var(--card-shadow);
-            transition: 0.3s;
-            background-color: var(--background-color);
-        }
-        .card:hover {
-            box-shadow: 0 8px 16px 0 var(--card-shadow);
-        }
-
-        /* Toggle Switch Styles */
-        .theme-toggle {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            padding: 10px;
-        }
-
-        .switch {
-            position: relative;
-            display: inline-block;
-            width: 60px;
-            height: 34px;
-        }
-
-        .switch input { 
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            transition: .4s;
-            border-radius: 34px;
-        }
-
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 26px;
-            width: 26px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            transition: .4s;
-            border-radius: 50%;
-        }
-
-        input:checked + .slider {
-            background-color: #2196F3;
-        }
-
-        input:checked + .slider:before {
-            transform: translateX(26px);
-        }
-
-        /* Gradio Components Styling */
-        .gradio-container {
-            background-color: var(--background-color);
-            color: var(--text-color);
-        }
-
-        a {
-            color: var(--text-color);
-        }
-
-        """) as demo:
-            # Add Theme Toggle Switch
+        with gr.Blocks() as demo:
+            # Embed the CSS and Theme Toggle Switch
             gr.HTML(
                 """
+                <style>
+                    /* Define CSS Variables for Themes */
+                    :root {
+                        --background-color: #FFFFFF;
+                        --text-color: #000000;
+                        --success-color: #4CAF50;
+                        --error-color: #D32F2F;
+                        --card-shadow: rgba(0, 0, 0, 0.2);
+                    }
+
+                    .dark-theme {
+                        --background-color: #121212;
+                        --text-color: #FFFFFF;
+                        --success-color: #81C784;
+                        --error-color: #E57373;
+                        --card-shadow: rgba(255, 255, 255, 0.2);
+                    }
+
+                    /* Apply Background and Text Colors */
+                    body {
+                        background-color: var(--background-color);
+                        color: var(--text-color);
+                        transition: background-color 0.3s, color 0.3s;
+                    }
+
+                    /* Card Styles */
+                    .card {
+                        box-shadow: 0 4px 8px 0 var(--card-shadow);
+                        transition: box-shadow 0.3s, background-color 0.3s;
+                        background-color: var(--background-color);
+                        padding: 10px;
+                        margin: 10px;
+                        border-radius: 5px;
+                    }
+
+                    .card:hover {
+                        box-shadow: 0 8px 16px 0 var(--card-shadow);
+                    }
+
+                    /* Toggle Switch Styles */
+                    .theme-toggle {
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                        padding: 10px;
+                    }
+
+                    .switch {
+                        position: relative;
+                        display: inline-block;
+                        width: 60px;
+                        height: 34px;
+                    }
+
+                    .switch input { 
+                        opacity: 0;
+                        width: 0;
+                        height: 0;
+                    }
+
+                    .slider {
+                        position: absolute;
+                        cursor: pointer;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        background-color: #ccc;
+                        transition: .4s;
+                        border-radius: 34px;
+                    }
+
+                    .slider:before {
+                        position: absolute;
+                        content: "";
+                        height: 26px;
+                        width: 26px;
+                        left: 4px;
+                        bottom: 4px;
+                        background-color: white;
+                        transition: .4s;
+                        border-radius: 50%;
+                    }
+
+                    input:checked + .slider {
+                        background-color: #2196F3;
+                    }
+
+                    input:checked + .slider:before {
+                        transform: translateX(26px);
+                    }
+
+                    /* Gradio Components Styling */
+                    .gradio-container {
+                        background-color: var(--background-color);
+                        color: var(--text-color);
+                        transition: background-color 0.3s, color 0.3s;
+                    }
+
+                    /* Ensure All Text Elements Use var(--text-color) */
+                    body, p, h1, h2, h3, h4, h5, h6, span, a, label, button, input, textarea, select {
+                        color: var(--text-color);
+                        transition: color 0.3s, background-color 0.3s;
+                    }
+
+                    /* Links Styling */
+                    a {
+                        color: var(--text-color);
+                        text-decoration: underline;
+                    }
+
+                    a:hover {
+                        color: var(--success-color);
+                    }
+
+                    /* Buttons Styling */
+                    button, .gr-button {
+                        background-color: var(--success-color);
+                        color: var(--background-color);
+                        border: none;
+                        padding: 10px 20px;
+                        text-align: center;
+                        text-decoration: none;
+                        display: inline-block;
+                        font-size: 16px;
+                        margin: 4px 2px;
+                        cursor: pointer;
+                        border-radius: 4px;
+                        transition: background-color 0.3s, color 0.3s;
+                    }
+
+                    button:hover, .gr-button:hover {
+                        background-color: var(--error-color);
+                    }
+
+                    /* Inputs and Selects Styling */
+                    input, textarea, select, .gr-textbox, .gr-dropdown, .gr-file {
+                        background-color: var(--background-color);
+                        color: var(--text-color);
+                        border: 1px solid var(--text-color);
+                        border-radius: 4px;
+                        padding: 8px;
+                        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+                    }
+
+                    /* Checkbox and Radio Buttons Styling */
+                    input[type="checkbox"], input[type="radio"] {
+                        accent-color: var(--success-color);
+                    }
+
+                    /* Gradio-specific Class Overrides */
+                    .gradio-container .gradio-block, 
+                    .gradio-container .gradio-row, 
+                    .gradio-container .gradio-column {
+                        background-color: var(--background-color);
+                        color: var(--text-color);
+                    }
+
+                    /* Ensure Gradio Tabs Respect the Theme */
+                    .gradio-container .tab-title {
+                        color: var(--text-color);
+                    }
+
+                    .gradio-container .tab-title.selected {
+                        border-bottom: 2px solid var(--success-color);
+                    }
+
+                    /* Additional Styling for HTML Components within Gradio */
+                    .gradio-container .markdown p,
+                    .gradio-container .markdown h1,
+                    .gradio-container .markdown h2,
+                    .gradio-container .markdown h3,
+                    .gradio-container .markdown h4,
+                    .gradio-container .markdown h5,
+                    .gradio-container .markdown h6 {
+                        color: var(--text-color);
+                    }
+
+                    .gradio-container .html-content a {
+                        color: var(--text-color);
+                    }
+
+                    .gradio-container .html-content a:hover {
+                        color: var(--success-color);
+                    }
+                </style>
+
                 <div class="theme-toggle">
                     <label class="switch">
                         <input type="checkbox" id="theme-checkbox">
@@ -560,12 +652,20 @@ def build_app():
                     <span style="margin-left: 10px;">Dark Mode</span>
                 </div>
                 <script>
+                    // Check for saved user preference on load
+                    if (localStorage.getItem('theme') === 'dark') {
+                        document.getElementById('theme-checkbox').checked = true;
+                        document.body.classList.add('dark-theme');
+                    }
+
                     const toggleSwitch = document.getElementById('theme-checkbox');
                     toggleSwitch.addEventListener('change', function() {
                         if(this.checked) {
                             document.body.classList.add('dark-theme');
+                            localStorage.setItem('theme', 'dark');
                         } else {
                             document.body.classList.remove('dark-theme');
+                            localStorage.setItem('theme', 'light');
                         }
                     });
                 </script>