Update light_mode_chatter_owl.css

light_mode_chatter_owl.css

@@ -298,6 +298,65 @@ body.dark {
   --primary-color: #ffb74d;
 }
 
+/* === Dark Mode Styles === */
+body.dark-mode {
+  --bg-color: #1e1e1e;
+  --text-color: #f0f0f0;
+  --card-bg: #2a2a2a;
+  --primary-color: #ffb74d;
+}
+
+/* Apply text and background colors */
+body.dark-mode,
+body.dark-mode .main-content,
+body.dark-mode .gradio-container {
+  background-color: var(--bg-color) !important;
+  color: var(--text-color) !important;
+}
+
+/* Boxes */
+body.dark-mode .gr-box,
+body.dark-mode #module-wrapper {
+  background-color: var(--card-bg);
+  color: var(--text-color);
+}
+
+/* Textboxes */
+body.dark-mode textarea,
+body.dark-mode input[type="text"],
+body.dark-mode .gr-textbox textarea {
+  background-color: var(--card-bg);
+  color: var(--text-color);
+  border: 1px solid #555;
+}
+
+/* Buttons */
+body.dark-mode .gr-button {
+  background-color: var(--primary-color);
+  color: black;
+  border: none;
+}
+
+/* Dropdowns, checkboxes */
+body.dark-mode select,
+body.dark-mode .gr-dropdown select,
+body.dark-mode .gr-checkbox label {
+  background-color: var(--card-bg);
+  color: var(--text-color);
+}
+
+/* Audio & plot */
+body.dark-mode .gr-audio,
+body.dark-mode .gr-plot {
+  background-color: var(--card-bg);
+}
+
+/* Top bar adjustments */
+body.dark-mode #top-bar {
+  background-color: var(--card-bg);
+  border-color: #444;
+}
+
 @keyframes float {
     0% { transform: translateY(0px); }
     50% { transform: translateY(-8px); }