app.py

"""Repro for gradio-app/gradio#10940 - text that inherits the app container's color.

`.gradio-container` handed down `color: var(--button-secondary-text-color)`, so every
element without its own color declaration inherited the secondary button text color.
Citrus is the only built-in theme whose dark-mode value for that variable is a dark color
(#1c1917), because its dark buttons are amber with dark text. So in Citrus dark mode all
such text rendered near-black on a dark background.

Open this Space with `?__theme=dark`, then with `?__theme=light`, and compare the four
marked bits of text.
"""

import time

import gradio as gr

BUSY_SECONDS = 15

SCORED_TOKENS = [
    ("The ", -0.9),
    ("quick ", -0.4),
    ("brown ", 0.0),
    ("fox ", 0.5),
    ("jumps", 0.95),
]

# Nodes at depth >= 3 start collapsed, which is what renders the `Object(N)` preview text.
NESTED_JSON = {
    "run": {
        "model": {
            "config": {"steps": 30, "guidance": 7.5},
            "tokenizer": {"type": "bpe", "vocab": 50257},
            "name": "demo",
        },
        "tags": ["a", "b", "c"],
    }
}


def slow(text: str) -> str:
    time.sleep(BUSY_SECONDS)
    return text


with gr.Blocks() as demo:
    gr.Markdown(
        f"""
        # gradio#10940 - inherited text color (theme: Citrus, gradio {gr.__version__})

        Add `?__theme=dark` to the URL, then `?__theme=light`, and compare the four cases.
        In dark mode the marked text is either hard to read or gone entirely, depending on
        which version of gradio this Space is running.
        """
    )

    with gr.Row():
        with gr.Column():
            gr.Markdown(
                "### 1. Status tracker timer text\n"
                "The case the issue reports. Click the button, then look at the "
                "**bottom-right corner of the output box** for `processing | 1.4s`."
            )
            text_in = gr.Textbox("hello", label="Input")
            slow_btn = gr.Button(f"Run (stays busy {BUSY_SECONDS}s)")
            slow_out = gr.Textbox(label="Output")
            slow_btn.click(slow, text_in, slow_out)

        with gr.Column():
            gr.Markdown(
                "### 2. Audio record button\n"
                "Look at the **`Record` label** inside the audio widget."
            )
            gr.Audio(sources=["microphone"], label="Microphone", interactive=True)

    with gr.Row():
        with gr.Column():
            gr.Markdown(
                "### 3. HighlightedText score legend\n"
                "Look at the **`0` label** in the middle of the gradient strip. The `-1` "
                "and `+1` at the ends sit on saturated color and read either way."
            )
            gr.HighlightedText(
                value=SCORED_TOKENS,
                label="HighlightedText (scores mode)",
                show_legend=True,
            )

        with gr.Column():
            gr.Markdown(
                "### 4. JSON preview and toggle\n"
                "Look at the **`Object(2)` preview text** on the collapsed nodes, and the "
                "**expand/collapse arrows** down the left."
            )
            gr.JSON(value=NESTED_JSON, label="JSON (deep nodes collapsed)")
            gr.JSON(value=NESTED_JSON, label="JSON (all expanded)", open=True)

if __name__ == "__main__":
    demo.launch(theme=gr.themes.Citrus(), ssr_mode=False)