updated theme and header

app.py

@@ -1407,7 +1407,99 @@ def _create_gradio_lite_html(python_code: str) -> str:
     """
     return html_template
 
+def _get_mcp_header():
+    html = """
+    <style>
+        .header-container {           
+            background: linear-gradient(314deg, #64748b 0%, #373f4a 100%);
+            padding: 30px 20px;
+            border-radius: 16px;
+            color: white !important;
+            text-align: center;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            margin-bottom: 25px;
+            font-family: 'Inter', -apple-system, sans-serif;
+        }
+        
+        .header-content {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .header-title {
+            color: white !important;
+            font-size: 2.5rem;
+            font-weight: 800;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+            letter-spacing: -0.02em;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .header-icon {
+            font-size: 3rem;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+        }
 
+        .header-subtitle {
+            color: #e2e8f0 !important; /* Fallback para var(--neutral-200) */
+            font-size: 1.1rem;
+            font-weight: 400;
+            margin-top: 8px;
+            opacity: 0.9;
+            letter-spacing: 0.01em;
+        }
+
+        .header-footer {
+            color: #e2e8f0 !important;
+            margin-top: 25px;
+            padding-top: 15px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            font-size: 0.85rem;
+            font-weight: 500;
+            opacity: 0.85;
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        
+        .header-tag {
+            color: #e2e8f0 !important;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .separator {
+            color: #e2e8f0 !important;
+            opacity: 0.4;
+        }
+    </style>
+
+    <div class="header-container">
+        <div class="header-content">
+            <div class="header-title">
+                <span class="header-icon">🕵️‍♂️</span> GitRepo Inspector
+            </div>
+            <div class="header-subtitle">
+                MCP Server: AI Tools for GitHub Analysis & Automation
+            </div>
+            
+            <div class="header-footer">
+                <span class="header-tag">Powered by Gradio 🚀</span>
+                <span class="separator">|</span>
+                <span class="header-tag">Official MCP Protocol 🔌</span>
+                <span class="separator">|</span>
+                <span class="header-tag">Gemini • SambaNova • OpenAI • Nebius</span>
+            </div>
+        </div>
+    </div>
+    """
+    return html
 # endregion
 
 # region MAIN LAYOUT DEFINITION
@@ -1432,11 +1524,66 @@ css = """
 .min-h-50px { min-height: 50px; }
 """
 generated_theme_state = None  # Setting global instead gr.State()
+theme = gr.themes.Default(
+    primary_hue='blue',
+    secondary_hue='teal',
+    neutral_hue='neutral'
+).set(
+    body_background_fill='*neutral_100',
+    body_background_fill_dark='*neutral_900',
+    body_text_color='*neutral_700',
+    body_text_color_dark='*neutral_200',
+    body_text_weight='400',
+    link_text_color='*primary_500',
+    link_text_color_dark='*primary_400',
+    code_background_fill='*neutral_100',
+    code_background_fill_dark='*neutral_800',
+    shadow_drop='0 1px 3px rgba(0,0,0,0.1)',
+    shadow_inset='inset 0 2px 4px rgba(0,0,0,0.05)',
+    block_background_fill='*neutral_50',
+    block_background_fill_dark='*neutral_700',
+    block_border_color='*neutral_200',
+    block_border_color_dark='*neutral_600',
+    block_border_width='1px',
+    block_border_width_dark='1px',
+    block_label_background_fill='*primary_50',
+    block_label_background_fill_dark='*primary_600',
+    block_label_text_color='*primary_600',
+    block_label_text_color_dark='*primary_50',
+    panel_background_fill='white',
+    panel_background_fill_dark='*neutral_800',
+    panel_border_color='*neutral_200',
+    panel_border_color_dark='*neutral_700',
+    panel_border_width='1px',
+    panel_border_width_dark='1px',
+    input_background_fill='white',
+    input_background_fill_dark='*neutral_800',
+    input_border_color='*neutral_300',
+    input_border_color_dark='*neutral_700',
+    slider_color='*primary_500',
+    slider_color_dark='*primary_400',
+    button_primary_background_fill='*primary_600',
+    button_primary_background_fill_dark='*primary_500',
+    button_primary_background_fill_hover='*primary_700',
+    button_primary_background_fill_hover_dark='*primary_400',
+    button_primary_border_color='transparent',
+    button_primary_border_color_dark='transparent',
+    button_primary_text_color='white',
+    button_primary_text_color_dark='white',
+    button_secondary_background_fill='*neutral_200',
+    button_secondary_background_fill_dark='*neutral_600',
+    button_secondary_background_fill_hover='*neutral_300',
+    button_secondary_background_fill_hover_dark='*neutral_500',
+    button_secondary_border_color='transparent',
+    button_secondary_border_color_dark='transparent',
+    button_secondary_text_color='*neutral_700',
+    button_secondary_text_color_dark='*neutral_200'
+)
 
-with gr.Blocks(theme=gr.themes.Ocean(), css=css, head=THEME_JS, title="GitRepo Inspector (MCP Server)") as app:
+with gr.Blocks(theme=theme, css=css, head=THEME_JS, title="GitRepo Inspector (MCP Server)") as app:
     css_data_transport = gr.Textbox(visible=False)
 
-    gr.Markdown("# 🤖 GitRepo Inspector (MCP Server) 🤖")
+    gr.HTML(_get_mcp_header())
 
     # GLOBAL CONFIGURATION
     with gr.Accordion("⚙️ Global Configuration (Configure tools here)", open=True):