force dark mode

app.py

@@ -4,24 +4,13 @@ from mcp_servers.mcp_manager import start_mcp_servers
 start_mcp_servers()
 
 from support.log_manager import logger
+from support.game_settings import custom_header
 from support.settings import SERVER_PORT
 from pages import home, play, stats
 from support.style.css import final_css
 from support.game_settings import JS
 
 
-# Custom header HTML
-custom_header = """
-<div class="custom-navbar">
-    <div class="navbar-title">🕵️ Agentic Codenames</div>
-    <div class="navbar-links">
-        <a href="#" class="nav-link active" data-tab-id="home_id">Home</a>
-        <a href="#" class="nav-link" data-tab-id="play_id">Play</a>
-        <a href="#" class="nav-link" data-tab-id="stats_id">Stats</a>
-    </div>
-</div>
-"""
-
 # Create main application
 with gr.Blocks(fill_width=True, title="Agentic Codenames", css=final_css, js=JS) as demo:
     gr.HTML(custom_header)
@@ -36,17 +25,6 @@ with gr.Blocks(fill_width=True, title="Agentic Codenames", css=final_css, js=JS)
         with gr.Tab("📊 Stats", id="stats_id_tab", elem_classes="tab_btn"):
             stats.demo.render()
 
-    # Render home page (default/main page)
-    # home.demo.render()
-
-# Add additional pages using route method
-# with demo.route("Play", "/play"):
-#     gr.HTML(custom_header)
-#     play.demo.render()
-
-# with demo.route("Stats", "/stats"):
-#     gr.HTML(custom_header)
-#     stats.demo.render()
 
 if __name__ == "__main__":
     demo.launch(

support/game_settings.py

@@ -238,6 +238,52 @@ document.addEventListener('DOMContentLoaded', function() {
 
 JS = r"""
 function initCarousel() {
+
+    function forceDarkMode() {
+        // Set dark mode on the root elements
+        const gradioContainer = document.querySelector('.gradio-container');
+        if (gradioContainer) {
+            gradioContainer.classList.add('dark');
+            gradioContainer.setAttribute('data-theme', 'dark');
+        }
+        
+        // Set dark mode on document root
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.documentElement.style.colorScheme = 'dark';
+        
+        // Set dark mode on body
+        document.body.setAttribute('data-theme', 'dark');
+        document.body.classList.add('dark');
+        
+        // Force dark color scheme
+        const style = document.createElement('style');
+        style.textContent = `
+            :root {
+                color-scheme: dark !important;
+            }
+            .gradio-container {
+                color-scheme: dark !important;
+            }
+            body {
+                background-color: #0b0f19 !important;
+                color: #ffffff !important;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    
+    // Apply dark mode immediately
+    forceDarkMode();
+    
+    // Also apply after DOM is fully loaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', forceDarkMode);
+    }
+    
+    // Re-apply dark mode when Gradio updates the DOM
+    const observer = new MutationObserver(forceDarkMode);
+    observer.observe(document.body, { childList: true, subtree: true });
+    
     // --- Carousel setup ---
     function waitForElements(selectors, callback) {
         const interval = setInterval(() => {
@@ -448,3 +494,16 @@ ALL_MODELS = sorted({
     for preset in TEAM_MODEL_PRESETS.values()
     for model in ([preset["boss"], preset["captain"]] + preset["players"])
 })
+
+
+# Custom header HTML
+custom_header = """
+<div class="custom-navbar">
+    <div class="navbar-title">🕵️ Agentic Codenames</div>
+    <div class="navbar-links">
+        <a href="#" class="nav-link active" data-tab-id="home_id">Home</a>
+        <a href="#" class="nav-link" data-tab-id="play_id">Play</a>
+        <a href="#" class="nav-link" data-tab-id="stats_id">Stats</a>
+    </div>
+</div>
+"""

support/style/css.py

@@ -444,6 +444,14 @@ stats_css = """
 css = """
 /* ==================== COMPACT HEADER ==================== */
 
+:root {
+    color-scheme: dark !important;
+}
+
+.gradio-container {
+    color-scheme: dark !important;
+}
+
 .app.svelte-18evea3.svelte-18evea3{
     padding: 0.5rem;    
 }