Forcing light mode at the application level using Javascript.

app.py

@@ -317,50 +317,9 @@ custom_css = """
 /* Import Oswald font - Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
-/* Force light mode at root level */
-:root {
-    color-scheme: light !important;
-}
-
-/* Override ALL dark mode media queries */
-@media (prefers-color-scheme: dark) {
-    * {
-        color-scheme: light !important;
-    }
-    
-    html, body {
-        background-color: rgb(240, 236, 230) !important;
-        color: #120f0e !important;
-    }
-    
-    .gradio-container-5-42-0 {
-        color-scheme: light !important;
-        background-color: rgb(240, 236, 230) !important;
-    }
-    
-    /* Target ALL possible chat elements in dark mode */
-    .placeholder-content,
-    .placeholder-content.svelte-9pi8y1,
-    .placeholder-content.svelte-9pi8y1[role="complementary"],
-    div[role="complementary"],
-    .gradio-chatbot,
-    .gradio-chatbot *,
-    .chatbot,
-    [data-testid="chatbot"],
-    [data-testid="chatbot"] *,
-    .scroll-hide,
-    .overflow-y-auto {
-        background-color: #d9d1ce !important;
-        background: #d9d1ce !important;
-        color: #120f0e !important;
-    }
-}
-
-html, body {
-    color-scheme: light !important;
-    background-color: rgb(240, 236, 230) !important;
-    margin: 0 !important;
-    padding: 0 !important;
+/* Apply Oswald globally */
+*, *::before, *::after {
+    font-family: "Oswald", sans-serif !important;
     color: #120f0e !important;
 }
 
@@ -371,13 +330,6 @@ html, body {
     color: #120f0e !important;
     padding-top: 0 !important;
     margin-top: 0 !important;
-    color-scheme: light !important;
-}
-
-/* Apply Oswald globally */
-*, *::before, *::after {
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
 }
 
 /* Title styling */
@@ -396,31 +348,15 @@ html, body {
     padding: 0;
 }
 
-/* AGGRESSIVE chat styling - target everything */
+/* Chat styling */
 .chat-container,
 .gradio-container-5-42-0 .gradio-chatbot,
-.gradio-container-5-42-0 #main-chatbot,
-.gradio-container-5-42-0 .gradio-chatbot > div,
-.gradio-container-5-42-0 .gradio-chatbot .scroll-hide,
-.gradio-container-5-42-0 .gradio-chatbot .overflow-y-auto,
-.placeholder-content,
-.placeholder-content.svelte-9pi8y1,
-.placeholder-content.svelte-9pi8y1[role="complementary"],
-div[role="complementary"] {
+.gradio-container-5-42-0 #main-chatbot {
     background-color: #d9d1ce !important;
-    background: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
     padding: 20px !important;
     min-height: 900px;
-    color: #120f0e !important;
-}
-
-/* Force all nested elements */
-.gradio-container-5-42-0 .gradio-chatbot *:not(.message) {
-    background-color: #d9d1ce !important;
-    background: #d9d1ce !important;
-    color: #120f0e !important;
 }
 
 /* Message styling */
@@ -450,11 +386,6 @@ div[role="complementary"] {
     font-weight: 400 !important;
 }
 
-/* Hide avatars */
-.gradio-container-5-42-0 .gradio-chatbot .avatar-container {
-    display: none !important;
-}
-
 /* Input section styling */
 .input-section {
     background-color: rgb(240, 236, 230) !important;
@@ -513,6 +444,19 @@ html_head_content = '''
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script>
+// Force light theme in Gradio
+window.addEventListener('DOMContentLoaded', function () {
+    const gradioURL = window.location.href;
+    const url = new URL(gradioURL);
+    const currentTheme = url.searchParams.get('__theme');
+    
+    if (currentTheme !== 'light') {
+        url.searchParams.set('__theme', 'light');
+        window.location.replace(url.toString());
+    }
+});
+</script>
 '''
 
 # --- UI: MathJax Configuration ---