upd

app.py

@@ -3,16 +3,42 @@ from tinysql_dataset_viewer import dataset_viewer
 import gradio as gr
 
 custom_css = """
-/* Force everything dark */
-.gradio-container {
-    background: #0A0A0A !important;
+/* NUCLEAR OPTION - Force EVERYTHING dark */
+*, *::before, *::after {
+    background-color: #0A0A0A !important;
+    color: #E0E0E0 !important;
 }
 
-/* Tabs - black background, bigger bold text */
-.tabs {
+/* Override for specific dark elements that should stay darker */
+input, textarea, select, table, .dataframe, 
+table td, table th, .dataframe td, .dataframe th {
+    background-color: #1A1A1A !important;
+    color: #E0E0E0 !important;
+}
+
+/* Table cells should NOT have nested black backgrounds */
+table td *, table th *, .dataframe td *, .dataframe th * {
+    background-color: transparent !important;
+}
+
+/* Gray gradient boxes should keep their backgrounds */
+[style*="background: linear-gradient"],
+[style*="background: #2A2A2A"],
+[style*="background: #3A3A3A"],
+[style*="background: #4A4A4A"] {
+    background: inherit !important;
+}
+
+/* Text inside styled boxes should have transparent backgrounds */
+[style*="background"] * {
+    background-color: transparent !important;
+}
+
+.gradio-container {
     background: #0A0A0A !important;
 }
 
+/* Tabs - black background, bigger bold text */
 .tab-nav {
     background: #0A0A0A !important;
     border: none !important;
@@ -39,18 +65,10 @@ label > span {
     font-weight: 700 !important;
 }
 
-/* Force white text everywhere */
-* {
-    color: #E0E0E0 !important;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    color: #E0E0E0 !important;
-}
-
 /* Orange buttons */
-.primary {
+.primary, button.primary {
     background: #FF6B4A !important;
+    color: white !important;
 }
 
 /* Orange sliders */
@@ -62,52 +80,22 @@ input[type="range"]::-moz-range-thumb {
     background: #FF6B4A !important;
 }
 
-/* Force dark inputs and dropdowns */
-input, textarea, select {
-    background: #1A1A1A !important;
-    color: #E0E0E0 !important;
-    border: 1px solid #3A3A3A !important;
-}
-
-/* Force dark table/dataframe */
-.dataframe, .table-wrap, table {
+/* Code blocks stay dark gray with transparent text containers */
+pre, code, .code {
     background: #1A1A1A !important;
 }
 
-.dataframe td, .dataframe th, table td, table th {
-    background: #1A1A1A !important;
-    color: #E0E0E0 !important;
-    border-color: #3A3A3A !important;
+pre *, code *, .code * {
+    background-color: transparent !important;
 }
 
-/* Dropdown menu */
-.dropdown-menu {
+/* Line numbers in code should be transparent */
+.cm-lineNumbers, .cm-gutters {
     background: #1A1A1A !important;
 }
 
-.dropdown-menu option {
-    background: #1A1A1A !important;
-    color: #E0E0E0 !important;
-}
-
-/* Number input wrapper */
-.number-input, .textbox {
-    background: #1A1A1A !important;
-}
-
-/* Force all white boxes to be dark */
-.block, .form, .input-wrap, .wrap {
-    background: #0A0A0A !important;
-}
-
-/* Code editor backgrounds */
-.cm-editor, .cm-scroller, .code-wrap {
-    background: #1A1A1A !important;
-}
-
-/* Slider number displays */
-.slider-number {
-    background: #1A1A1A !important;
+.cm-line {
+    background: transparent !important;
 }
 """
 

tinysql_model_demo.py

@@ -123,7 +123,11 @@ def model_demo(shared_instruction, shared_schema):
             schema = gr.Code(
                 label="Database Schema (SQL)",
                 language="sql",
-                value="CREATE TABLE employees (\n    name VARCHAR(100),\n    salary INT,\n    department VARCHAR(100)\n);",
+                value="""CREATE TABLE employees (
+    name VARCHAR(100),
+    salary INT,
+    department VARCHAR(100)
+);""",
                 lines=6
             )