Darkmode Override Fix

It appears the text box coloring issue may be a result of the dark mode system overriding the display. Redundant CSS and overridden code have been pruned in favor of a light mode override.

app.py

@@ -317,66 +317,39 @@ custom_css = """
 /* Import Oswald font - Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
-/* Oswald font classes */
-.oswald-light { 
-    font-family: "Oswald", sans-serif; 
-    font-optical-sizing: auto; 
-    font-weight: 300; 
-    font-style: normal; 
-}
-.oswald-regular { 
-    font-family: "Oswald", sans-serif; 
-    font-optical-sizing: auto; 
-    font-weight: 400; 
-    font-style: normal; 
-}
-.oswald-medium { 
-    font-family: "Oswald", sans-serif; 
-    font-optical-sizing: auto; 
-    font-weight: 500; 
-    font-style: normal; 
-}
-.oswald-semibold { 
-    font-family: "Oswald", sans-serif; 
-    font-optical-sizing: auto; 
-    font-weight: 600; 
-    font-style: normal; 
+/* Force light mode */
+@media (prefers-color-scheme: dark) {
+    .gradio-container-5-42-0 {
+        color-scheme: light !important;
+    }
 }
-.oswald-bold { 
-    font-family: "Oswald", sans-serif; 
-    font-optical-sizing: auto; 
-    font-weight: 700; 
-    font-style: normal; 
+
+html, body {
+    color-scheme: light !important;
+    background-color: rgb(240, 236, 230) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    color: #120f0e !important;
 }
 
-/* Main container styling - remove top padding */
+/* Main container styling */
 .gradio-container-5-42-0 {
     background-color: rgb(240, 236, 230) !important;
     font-family: "Oswald", sans-serif !important;
-    font-optical-sizing: auto !important;
-    font-weight: 400 !important;
-    font-style: normal !important;
     color: #120f0e !important;
     padding-top: 0 !important;
     margin-top: 0 !important;
 }
 
-/* Apply Oswald to all text elements */
+/* Apply Oswald globally */
 *, *::before, *::after {
     font-family: "Oswald", sans-serif !important;
-    font-optical-sizing: auto !important;
     color: #120f0e !important;
 }
 
-/* Remove any default body margins */
-body {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
-/* Title styling - minimize top spacing */
+/* Title styling */
 .title-header {
-    background-color: rgb(240, 236, 230);
+    background-color: rgb(240, 236, 230) !important;
     padding: 5px 20px 10px 20px;
     margin: 0;
     border-bottom: 1pt solid #59524f;
@@ -388,101 +361,49 @@ body {
     color: #120f0e !important;
     margin: 0;
     padding: 0;
-    font-family: "Oswald", sans-serif !important;
 }
 
-/* Chat container */
-.chat-container {
-    min-height: 900px;
-    background-color: #d9d1ce !important;
-    border: 1pt solid #59524f !important;
-    border-radius: 6px;
-    padding: 20px;
-}
-
-/* Force chatbot background with highest specificity */
+/* Chat container and chatbot styling */
+.chat-container,
 .gradio-container-5-42-0 .gradio-chatbot,
-.gradio-container-5-42-0 .chatbot,
-.gradio-container-5-42-0 div[data-testid="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,
-.gradio-container-5-42-0 #main-chatbot,
-.gradio-container-5-42-0 [data-testid="chatbot"] {
+.gradio-container-5-42-0 .gradio-chatbot .overflow-y-auto {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
     padding: 20px !important;
-    font-family: "Oswald", sans-serif !important;
-}
-
-/* Target all nested chatbot divs */
-.gradio-container-5-42-0 .gradio-chatbot > div > div,
-.gradio-container-5-42-0 .gradio-chatbot > div > div > div {
-    background-color: #d9d1ce !important;
-}
-
-/* Force inheritance on all chatbot children */
-.gradio-container-5-42-0 .gradio-chatbot * {
-    background-color: inherit !important;
+    min-height: 900px;
 }
 
-/* Message styling - model messages same as send button color */
+/* Message styling */
 .gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown {
     background-color: #f09c7d !important;
     color: #120f0e !important;
     border-radius: 8px !important;
     padding: 12px 16px !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
     border: 1pt solid #59524f !important;
     max-width: 70%;
     margin-left: 0;
     margin-right: auto;
     word-wrap: break-word;
-    font-family: "Oswald", sans-serif !important;
     font-weight: 400 !important;
 }
 
-/* User messages same as clear button color */
 .gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
     background-color: #ada3a0 !important;
     color: #120f0e !important;
     border-radius: 8px !important;
     padding: 12px 16px !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
     border: 1pt solid #59524f !important;
     max-width: 70%;
     margin-left: auto;
     margin-right: 0;
     word-wrap: break-word;
-    font-family: "Oswald", sans-serif !important;
     font-weight: 400 !important;
 }
 
-/* Apply Oswald to all markdown content */
-.gradio-container-5-42-0 .gradio-chatbot .markdown p,
-.gradio-container-5-42-0 .gradio-chatbot .markdown h1,
-.gradio-container-5-42-0 .gradio-chatbot .markdown h2,
-.gradio-container-5-42-0 .gradio-chatbot .markdown h3,
-.gradio-container-5-42-0 .gradio-chatbot .markdown h4,
-.gradio-container-5-42-0 .gradio-chatbot .markdown h5,
-.gradio-container-5-42-0 .gradio-chatbot .markdown h6,
-.gradio-container-5-42-0 .gradio-chatbot .markdown ul,
-.gradio-container-5-42-0 .gradio-chatbot .markdown ol,
-.gradio-container-5-42-0 .gradio-chatbot .markdown li,
-.gradio-container-5-42-0 .gradio-chatbot .markdown strong,
-.gradio-container-5-42-0 .gradio-chatbot .markdown em,
-.gradio-container-5-42-0 .gradio-chatbot .markdown code {
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
-}
-
-/* Mode indicators with Oswald */
-.gradio-container-5-42-0 .gradio-chatbot .markdown strong {
-    font-weight: 600 !important;
-    color: #120f0e !important;
-}
-
 /* Hide avatars */
 .gradio-container-5-42-0 .gradio-chatbot .avatar-container {
     display: none !important;
@@ -490,47 +411,35 @@ body {
 
 /* Input section styling */
 .input-section {
-    background-color: rgb(240, 236, 230);
+    background-color: rgb(240, 236, 230) !important;
     border-top: 1pt solid #59524f;
     padding: 20px;
 }
 
-/* Button styling with new colors */
-.gradio-container-5-42-0 .clear-button {
-    background-color: #ada3a0 !important;
+/* Button styling */
+.gradio-container-5-42-0 .send-button {
+    background-color: #f09c7d !important;
     color: #120f0e !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
     padding: 8px 16px !important;
     cursor: pointer !important;
     margin: 5px !important;
-    font-family: "Oswald", sans-serif !important;
     font-weight: 500 !important;
-    font-optical-sizing: auto !important;
 }
 
-.gradio-container-5-42-0 .clear-button:hover {
-    background-color: rgba(173, 163, 160, 0.8) !important;
-}
-
-.gradio-container-5-42-0 .send-button {
-    background-color: #f09c7d !important;
+.gradio-container-5-42-0 .clear-button {
+    background-color: #ada3a0 !important;
     color: #120f0e !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
     padding: 8px 16px !important;
     cursor: pointer !important;
     margin: 5px !important;
-    font-family: "Oswald", sans-serif !important;
     font-weight: 500 !important;
-    font-optical-sizing: auto !important;
 }
 
-.gradio-container-5-42-0 .send-button:hover {
-    background-color: rgba(240, 156, 125, 0.8) !important;
-}
-
-/* Textbox styling with chat history color */
+/* Textbox styling */
 .gradio-container-5-42-0 .input-textbox {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
@@ -543,26 +452,13 @@ body {
     color: #120f0e !important;
     padding: 15px !important;
     font-size: 16px !important;
-    font-family: "Oswald", sans-serif !important;
     font-weight: 400 !important;
-    font-optical-sizing: auto !important;
 }
 
 .gradio-container-5-42-0 .input-textbox textarea::placeholder {
-    font-family: "Oswald", sans-serif !important;
     font-weight: 300 !important;
     color: rgba(18, 15, 14, 0.6) !important;
 }
-
-/* Ensure all input elements use Oswald and new colors */
-.gradio-container-5-42-0 input, 
-.gradio-container-5-42-0 textarea, 
-.gradio-container-5-42-0 button, 
-.gradio-container-5-42-0 select {
-    font-family: "Oswald", sans-serif !important;
-    font-optical-sizing: auto !important;
-    color: #120f0e !important;
-}
 """
 
 # --- UI: HTML Head Content ---
@@ -647,7 +543,8 @@ def create_interface():
                 height=880,
                 elem_classes=["chat-container"],
                 container=True,
-                elem_id="main-chatbot"
+                elem_id="main-chatbot",
+                elem_style={"background-color": "#d9d1ce", "border": "1pt solid #59524f"}
             )
         
         # Row 3: Input Section