demo/theme.py

"""UI theme — dark shell with high-contrast tables/files."""

C_BG = "#0b1220"
C_PANEL = "#111827"
C_BORDER = "#334155"
C_TEXT = "#f1f5f9"
C_MUTED = "#cbd5e1"
C_ACCENT = "#3b82f6"
C_CODE_BG = "#020617"
C_CODE_FG = "#93c5fd"
C_TABLE_BG = "#0f172a"
C_TABLE_TEXT = "#f8fafc"
C_TABLE_HEADER = "#1e293b"

CUSTOM_CSS = f"""
.gradio-container {{
    max-width: 1360px !important;
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
    background: {C_BG} !important;
    color: {C_TEXT} !important;
}}

.header-block {{
    border-bottom: 1px solid {C_BORDER};
    padding-bottom: 1.1rem;
    margin-bottom: 1rem;
}}
.header-block .eyebrow {{
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: {C_ACCENT} !important;
    margin-bottom: 0.4rem;
}}
.header-block h1 {{
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0;
    color: {C_TEXT} !important;
    letter-spacing: -0.02em;
}}
.header-block p {{
    margin: 0.5rem 0 0;
    color: {C_MUTED} !important;
    font-size: 1.02rem;
    max-width: 44rem;
    line-height: 1.5;
}}
.footer-viral {{
    color: {C_MUTED} !important;
    font-size: 0.78rem;
    margin-top: 1.5rem;
}}
.footer-viral a {{
    color: {C_ACCENT} !important;
}}

/* Markdown / prose */
.prose, .markdown, .md, [class*="prose"] {{
    color: {C_TEXT} !important;
}}
.prose h1, .prose h2, .prose h3, .prose h4,
.markdown h1, .markdown h2, .markdown h3, .markdown h4 {{
    color: {C_TEXT} !important;
}}
.prose p, .prose li, .markdown p, .markdown li {{
    color: {C_TEXT} !important;
}}
.prose strong, .markdown strong {{
    color: #ffffff !important;
}}
.prose a, .markdown a {{
    color: {C_ACCENT} !important;
}}
.prose code, .markdown code, code {{
    background: {C_CODE_BG} !important;
    color: {C_CODE_FG} !important;
    border: 1px solid {C_BORDER} !important;
    border-radius: 4px !important;
    padding: 0.1rem 0.35rem !important;
}}
.prose pre, .markdown pre, pre {{
    background: {C_CODE_BG} !important;
    color: {C_TEXT} !important;
    border: 1px solid {C_BORDER} !important;
    border-radius: 8px !important;
}}
.prose pre code, .markdown pre code, pre code {{
    background: transparent !important;
    border: none !important;
    color: {C_TEXT} !important;
}}

/* Guide markdown tables stay dark */
.prose table, .markdown table {{
    border-color: {C_BORDER} !important;
}}
.prose th, .markdown th {{
    background: {C_TABLE_HEADER} !important;
    color: {C_TABLE_TEXT} !important;
}}
.prose td, .markdown td {{
    color: {C_TABLE_TEXT} !important;
    border-color: {C_BORDER} !important;
    background: {C_TABLE_BG} !important;
}}

/* Code / inputs */
.cm-editor, .cm-content, .cm-line {{
    background: {C_CODE_BG} !important;
    color: {C_TEXT} !important;
}}
textarea, input {{
    color: {C_TEXT} !important;
}}

/*
 * CRITICAL: Gradio Dataframe + File often render white cells.
 * Global light text then becomes invisible — force dark surfaces + light text.
 */
.preview-table table,
.preview-table th,
.preview-table td,
.preview-table .table-wrap,
.preview-table [data-testid="dataframe"] table,
.preview-table [data-testid="dataframe"] th,
.preview-table [data-testid="dataframe"] td {{
    background: {C_TABLE_BG} !important;
    color: {C_TABLE_TEXT} !important;
    border-color: {C_BORDER} !important;
}}
.preview-table th {{
    background: {C_TABLE_HEADER} !important;
    font-weight: 600 !important;
}}
.preview-table tr:nth-child(even) td {{
    background: #111827 !important;
}}

.download-box,
.download-box *,
.download-box a,
.download-box span,
.download-box label,
.download-box .file-preview,
.download-box [data-testid="file"] {{
    color: {C_TABLE_TEXT} !important;
}}
.download-box .file,
.download-box .file-preview,
.download-box [data-testid="file"],
.download-box .wrap,
.download-box .or {{
    background: {C_TABLE_BG} !important;
    border: 1px solid {C_BORDER} !important;
    border-radius: 8px !important;
    color: {C_TABLE_TEXT} !important;
}}
.download-box a {{
    color: {C_ACCENT} !important;
}}

/* Keep Convert / Upload actions compact — don't stretch to file-drop height */
.action-btn button,
.upload-action-btn button {{
    height: 42px !important;
    min-height: 42px !important;
    max-height: 48px !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 0.55rem 0.85rem !important;
}}
.upload-action-col {{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 1.55rem !important; /* align with file label */
}}
.sql-upload-box {{
    flex-grow: 1 !important;
}}
.sql-upload-box [data-testid="file"],
.sql-upload-box .wrap,
.sql-upload-box .upload-container {{
    min-height: 7.5rem !important;
}}

/* Fallback for unscoped Gradio dataframe/file widgets */
[data-testid="dataframe"] table,
[data-testid="dataframe"] th,
[data-testid="dataframe"] td {{
    background: {C_TABLE_BG} !important;
    color: {C_TABLE_TEXT} !important;
    border-color: {C_BORDER} !important;
}}
[data-testid="file"] .file-preview,
[data-testid="file"] .file {{
    background: {C_TABLE_BG} !important;
    color: {C_TABLE_TEXT} !important;
    border: 1px solid {C_BORDER} !important;
}}

footer {{ display: none !important; }}
"""


def build_theme():
    import gradio as gr

    return gr.themes.Base(
        primary_hue=gr.themes.colors.blue,
        neutral_hue=gr.themes.colors.slate,
        font=[gr.themes.GoogleFont("IBM Plex Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
        font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"],
    ).set(
        body_background_fill=C_BG,
        body_background_fill_dark=C_BG,
        background_fill_primary=C_PANEL,
        background_fill_primary_dark=C_PANEL,
        background_fill_secondary="#0f172a",
        background_fill_secondary_dark="#0f172a",
        border_color_primary=C_BORDER,
        border_color_primary_dark=C_BORDER,
        body_text_color=C_TEXT,
        body_text_color_dark=C_TEXT,
        body_text_color_subdued=C_MUTED,
        body_text_color_subdued_dark=C_MUTED,
        block_background_fill=C_PANEL,
        block_background_fill_dark=C_PANEL,
        block_label_text_color=C_MUTED,
        block_label_text_color_dark=C_MUTED,
        block_title_text_color=C_TEXT,
        block_title_text_color_dark=C_TEXT,
        input_background_fill=C_CODE_BG,
        input_background_fill_dark=C_CODE_BG,
        input_border_color=C_BORDER,
        input_border_color_dark=C_BORDER,
        input_placeholder_color=C_MUTED,
        input_placeholder_color_dark=C_MUTED,
        button_primary_background_fill=C_ACCENT,
        button_primary_background_fill_dark=C_ACCENT,
        button_primary_text_color="#ffffff",
        button_primary_text_color_dark="#ffffff",
        button_secondary_background_fill="#1e293b",
        button_secondary_background_fill_dark="#1e293b",
        button_secondary_text_color=C_TEXT,
        button_secondary_text_color_dark=C_TEXT,
        link_text_color=C_ACCENT,
        link_text_color_dark=C_ACCENT,
        code_background_fill=C_CODE_BG,
        code_background_fill_dark=C_CODE_BG,
        table_even_background_fill=C_TABLE_BG,
        table_even_background_fill_dark=C_TABLE_BG,
        table_odd_background_fill="#111827",
        table_odd_background_fill_dark="#111827",
        table_row_focus=C_TABLE_HEADER,
        table_row_focus_dark=C_TABLE_HEADER,
        table_text_color=C_TABLE_TEXT,
        table_text_color_dark=C_TABLE_TEXT,
        table_radius="8px",
    )


DARK_THEME = None