Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -15,7 +15,7 @@ def create_enhanced_okr_tab():
         gr.HTML: The Gradio HTML component that will display the formatted OKRs.
     """
 
-    # Custom CSS for modern OKR styling with Dark Mode support
+    # Custom CSS for modern OKR styling with Dark Mode support and JS theme syncing
     okr_custom_css = """
     <style>
     /* ----------------------------------------- */
@@ -34,6 +34,8 @@ def create_enhanced_okr_tab():
         --content-shadow: rgba(0,0,0,0.1);
         --objective-card-bg: #f8fafc;
         --objective-card-border: #3b82f6;
+        --objective-shadow: 0 4px 16px rgba(0,0,0,0.05);
+        --objective-shadow-hover: 0 8px 24px rgba(0,0,0,0.1);
         --objective-header-bg: transparent; /* Cleaner header background */
         --objective-title-color: #1e40af; /* Make title the colored element */
         --objective-meta-text-color: #475569;
@@ -66,43 +68,47 @@ def create_enhanced_okr_tab():
         --priority-low-border: #86efac;
     }
 
+    /* --- DARK MODE OVERRIDES (IMPROVED) --- */
     html.dark {
         --header-text-color: #e5e7eb;
-        --stat-card-bg: rgba(30, 41, 59, 0.5);
-        --stat-card-bg-hover: rgba(51, 65, 85, 0.7);
-        --stat-card-border: rgba(51, 65, 85, 0.8);
-        --content-bg: #1e293b; /* Dark background for content */
-        --content-shadow: rgba(0,0,0,0.4);
-        --objective-card-bg: #0f172a; /* Darker card background */
-        --objective-title-color: #60a5fa; /* Lighter blue for dark bg */
-        --objective-meta-text-color: #94a3b8;
-        --key-result-bg: #1e293b;
-        --key-result-border: #334155;
-        --key-result-border-hover: #3b82f6;
-        --kr-header-bg: #0f172a;
-        --kr-title-color: #e2e8f0;
-        --kr-metric-bg: rgba(59, 130, 246, 0.15);
-        --kr-metric-color: #93c5fd;
-        --kr-metric-border: rgba(59, 130, 246, 0.3);
-        --task-item-bg: #334155;
-        --task-item-bg-hover: #475569;
-        --task-item-border: #475569;
-        --task-item-border-hover: #52525b;
-        --task-title-color: #f1f5f9;
-        --task-detail-label-color: #cbd5e1;
-        --task-detail-text-color: #94a3b8;
-        --task-description-bg: #1e293b;
-        --task-description-border: #3b82f6;
-        --task-description-color: #cbd5e1;
-        --priority-high-bg: #450a0a;
-        --priority-high-color: #fca5a5;
-        --priority-high-border: #7f1d1d;
-        --priority-medium-bg: #422006;
-        --priority-medium-color: #fcd34d;
-        --priority-medium-border: #78350f;
-        --priority-low-bg: #062813;
-        --priority-low-color: #86efac;
-        --priority-low-border: #14532d;
+        --stat-card-bg: rgba(28, 28, 28, 0.7);
+        --stat-card-bg-hover: rgba(40, 40, 40, 0.8);
+        --stat-card-border: rgba(50, 50, 50, 0.8);
+        --content-bg: #0d1117; /* Black background for content */
+        --content-shadow: rgba(0,0,0,0.6);
+        --objective-card-bg: #161b22; /* Blackish card background */
+        --objective-card-border: #3b82f6;
+        --objective-shadow: 0 8px 24px rgba(0,0,0,0.5);
+        --objective-shadow-hover: 0 10px 28px rgba(0,0,0,0.6);
+        --objective-title-color: #58a6ff; /* White-ish blue for title */
+        --objective-meta-text-color: #8b949e; /* White-ish grey for meta */
+        --key-result-bg: #161b22;
+        --key-result-border: #30363d;
+        --key-result-border-hover: #58a6ff;
+        --kr-header-bg: #161b22;
+        --kr-title-color: #c9d1d9; /* White text */
+        --kr-metric-bg: rgba(56, 139, 253, 0.15);
+        --kr-metric-color: #58a6ff;
+        --kr-metric-border: rgba(56, 139, 253, 0.4);
+        --task-item-bg: #21262d;
+        --task-item-bg-hover: #30363d;
+        --task-item-border: #30363d;
+        --task-item-border-hover: #8b949e;
+        --task-title-color: #c9d1d9; /* White text */
+        --task-detail-label-color: #8b949e;
+        --task-detail-text-color: #8b949e;
+        --task-description-bg: #0d1117;
+        --task-description-border: #30363d;
+        --task-description-color: #8b949e;
+        --priority-high-bg: rgba(248, 81, 73, 0.15);
+        --priority-high-color: #ff7b72;
+        --priority-high-border: rgba(248, 81, 73, 0.4);
+        --priority-medium-bg: rgba(210, 153, 34, 0.15);
+        --priority-medium-color: #d29922;
+        --priority-medium-border: rgba(210, 153, 34, 0.4);
+        --priority-low-bg: rgba(63, 185, 80, 0.15);
+        --priority-low-color: #56d364;
+        --priority-low-border: rgba(63, 185, 80, 0.4);
     }
 
     /* Overall Container */
@@ -218,37 +224,23 @@ def create_enhanced_okr_tab():
         margin: 2rem;
         border-radius: 16px;
         overflow: hidden;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.05);
+        box-shadow: var(--objective-shadow);
         transition: all 0.3s ease;
     }
-    
-    html.dark .okr-objective {
-       box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-    }
 
     .okr-objective:hover {
         transform: translateY(-2px);
-        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+        box-shadow: var(--objective-shadow-hover);
     }
     
-    html.dark .okr-objective:hover {
-        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
-    }
-
     /* --- Objective Header (REDESIGNED) --- */
     .objective-header {
         padding: 2rem;
         background: var(--objective-header-bg);
-        border-bottom: 1px solid #e5e7eb; /* Subtle separator */
+        border-bottom: 1px solid var(--key-result-border); /* Use variable for consistency */
         position: relative;
     }
     
-    html.dark .objective-header {
-        border-bottom-color: #334155;
-    }
-    
-    /* REMOVED distracting ::before dot pattern */
-
     .objective-title {
         font-size: 1.5rem;
         font-weight: 700;
@@ -458,7 +450,7 @@ def create_enhanced_okr_tab():
         font-size: 1.5rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: var(--task-title-color);
+        color: var(--objective-title-color);
     }
 
     /* Loading Spinner */
@@ -504,10 +496,44 @@ def create_enhanced_okr_tab():
         }
     }
     </style>
+    <script>
+        function syncThemeWithParent() {
+            // This script runs inside the Gradio iframe. It looks at the parent page's
+            // <html> tag to see if the 'dark' class is present and applies it to the
+            // iframe's own <html> tag, ensuring the CSS variables for dark mode are activated.
+            try {
+                const parentHtml = window.parent.document.querySelector('html');
+                if (parentHtml) {
+                    if (parentHtml.classList.contains('dark')) {
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                    }
+                }
+            } catch (e) {
+                // This can fail due to cross-origin policies, but it's safe in Gradio.
+                console.error("Error syncing theme with parent:", e);
+            }
+        }
+
+        // Use a MutationObserver to detect when the theme is toggled on the parent page.
+        try {
+            const observer = new MutationObserver(syncThemeWithParent);
+            const parentHtml = window.parent.document.querySelector('html');
+            if (parentHtml) {
+                observer.observe(parentHtml, { attributes: true, attributeFilter: ['class'] });
+            }
+        } catch (e) {
+            console.error("Could not set up theme MutationObserver:", e);
+        }
+
+        // Also run the sync function once when the iframe's content has loaded.
+        document.addEventListener('DOMContentLoaded', syncThemeWithParent);
+    </script>
     """
 
     with gr.Column(elem_classes=["okr-root-column"]):
-        # Inject custom CSS
+        # Inject custom CSS and the theme-syncing JS
         gr.HTML(okr_custom_css)
 
         # Main OKR display area with enhanced styling