LinePlot text color

[jadehardouin]

Describe the bug

When I started changing the theme of my app, I encountered an issue with the color of the text that's inside the LinePlot. Because I put a dark background for the app, I put a light grey font color but this didn't apply this specific text. Does someone know how to change it? Or how it's instantiated?

Thanks in advance!

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils.colors import Color
from gradio.themes.utils import colors, fonts, sizes

light_grey = Color(
    name="light_grey",
    c50="#e0e0e0",
    c100="#e0e0e0",
    c200="#e0e0e0",
    c300="#e0e0e0",
    c400="#e0e0e0",
    c500="#e0e0e0",
    c600="#e0e0e0",
    c700="#e0e0e0",
    c800="#e0e0e0",
    c900="#e0e0e0",
    c950="#e0e0e0",
)

class Style(Base):
    def __init__(
        self,
        *,
        primary_hue: colors.Color | str = light_grey,
        secondary_hue: colors.Color | str = light_grey,
        neutral_hue: colors.Color | str = light_grey,
        spacing_size: sizes.Size | str = sizes.spacing_md,
        radius_size: sizes.Size | str = sizes.radius_md,
        text_size: sizes.Size | str = sizes.text_md,
        font: fonts.Font
        | str
        | Iterable[fonts.Font | str] = (fonts.GoogleFont("Sora")),
        font_mono: fonts.Font
        | str
        | Iterable[fonts.Font | str] = (fonts.GoogleFont("Sora")),
    ):
        super().__init__(
            primary_hue=primary_hue,
            secondary_hue=secondary_hue,
            neutral_hue=neutral_hue,
            spacing_size=spacing_size,
            radius_size=radius_size,
            text_size=text_size,
            font=font,
            font_mono=font_mono,
        )
        super().set(
            background_fill_primary="#050f19", #The color of the background of blocks
            background_fill_secondary="#050f19",
            block_background_fill="#050f19", #The color of the background of blocks
            block_background_fill_dark="#050f19",
            
            border_color_primary="#050f19", #The border of a block such as dropdown 
            border_color_primary_dark="#050f19",
            
            link_text_color="#f0ba2d", #The color for links
            link_text_color_dark="#f0ba2d",
            
            block_info_text_color="ffffff",
            block_info_text_color_dark="ffffff",
            
            block_border_color="#050f19", #The border color around an item (e.g. Accordion)
            block_border_color_dark="#050f19",
            block_shadow="*shadow_drop_lg",
            #form_gap_width="*spacing_md", #The border gap between form elements, (e.g. consecutive textboxes)
            
            input_background_fill="#081527", #The background of an input field
            input_background_fill_dark="#081527", 
            input_border_color="#050f19",
            input_border_color_dark="#050f19",
            input_border_width="2px", 
            
            block_label_background_fill="#f0ba2d",
            block_label_background_fill_dark="#f0ba2d",
            block_label_border_color=None,
            block_label_border_color_dark=None,
            block_label_text_color="#050f19",
            block_label_text_color_dark="#050f19",
            
            button_primary_background_fill="#ffffff",
            button_primary_border_color="#ffffff",
            button_primary_text_color="#050f19",
            button_shadow="*shadow_drop_lg",
            
            block_title_background_fill="#f0ba2d", #The background of the title of a form element (e.g. textbox).
            block_title_background_fill_dark="#f0ba2d", #The corner radius of the title of a form element (e.g. textbox).
            block_title_radius="*radius_sm",
            block_title_text_color="#050f19", #The text color of the title of a form element (e.g. textbox).
            block_title_text_color_dark="#050f19",
            block_title_text_size="*text_lg",
            
            body_background_fill="#050f19",
            body_background_fill_dark="#050f19",
            body_text_color="#ffffff", #The default text color.
            body_text_color_dark="#ffffff",
            body_text_color_subdued="#ffffff",
            body_text_color_subdued_dark="#ffffff",
            
            slider_color="*secondary_300",
            slider_color_dark="*secondary_600",
        )
style = Style()

def update_plot(tco1, tco2, dropdown, dropdown2):
    
    request_ranges = [100, 200, 300, 400, 500, 1000, 10000]
    costs_tco1 = [(tco1 * req) for req in request_ranges]
    costs_tco2 = [(tco2 * req + labour_cost2) for req in request_ranges]

    data = pd.DataFrame({
        "Number of requests": request_ranges * 2,
        "Cost ($)": costs_tco1 + costs_tco2,
        "AI model service": [dropdown] * len(request_ranges) + [dropdown2] * len(request_ranges)
        }
    )
    return gr.LinePlot.update(data, x="Number of requests", y="Cost ($)",color="AI model service",color_legend_position="bottom", title="Total Cost of Model Serving for one month", height=300, width=500, tooltip=["Number of requests", "Cost ($)", "AI model service"])

with gr.Blocks(theme=style) as demo:
        with gr.Row():
                compute_tco_btn = gr.Button("Compute cost/request and TCOs", size="lg", variant="primary", scale=1) 
                plot = gr.LinePlot()
compute_tco_btn.click(update_plot, inputs={tco1, tco2, dropdown, dropdown2], ouputs=plot)

Screenshot

Logs

No response

System Info

I am running the latest version of Gradio.

Severity

I can work around it

[freddyaboulton]

Thanks @jadehardouin !

[jadehardouin]

You're welcome! @freddyaboulton

Do you know a way I could bypass this issue? I need to have my gradio app ready by next week :)

[cswamy]

Based on my understanding, this requires customising the Altair plots. However, I am a bit stuck with how components such as LinePlot can access say primary_hue of a custom theme object. Can I get some guidance please?

Note: I couldn't reproduce the code in the issue but am testing on the line_plot demo.

import gradio as gr
from vega_datasets import data
from gradio.themes.base import Base
from gradio.themes.utils.colors import Color
from gradio.themes.utils import colors, fonts, sizes
from typing import Union, Iterable

stocks = data.stocks()
gapminder = data.gapminder()
gapminder = gapminder.loc[
    gapminder.country.isin(["Argentina", "Australia", "Afghanistan"])
]
climate = data.climate()
seattle_weather = data.seattle_weather()

## Or generate your own fake data, here's an example for stocks:
#
# import pandas as pd
# import random
#
# stocks = pd.DataFrame(
#     {
#         "symbol": [
#             random.choice(
#                 [
#                     "MSFT",
#                     "AAPL",
#                     "AMZN",
#                     "IBM",
#                     "GOOG",
#                 ]
#             )
#             for _ in range(120)
#         ],
#         "date": [
#             pd.Timestamp(year=2000 + i, month=j, day=1)
#             for i in range(10)
#             for j in range(1, 13)
#         ],
#         "price": [random.randint(10, 200) for _ in range(120)],
#     }
# )

def line_plot_fn(dataset):
    if dataset == "stocks":
        return gr.LinePlot(
            stocks,
            x="date",
            y="price",
            color="symbol",
            color_legend_position="bottom",
            title="Stock Prices",
            tooltip=["date", "price", "symbol"],
            height=300,
            width=500,
        )
    elif dataset == "climate":
        return gr.LinePlot(
            climate,
            x="DATE",
            y="HLY-TEMP-NORMAL",
            y_lim=[250, 500],
            title="Climate",
            tooltip=["DATE", "HLY-TEMP-NORMAL"],
            height=300,
            width=500,
        )
    elif dataset == "seattle_weather":
        return gr.LinePlot(
            seattle_weather,
            x="date",
            y="temp_min",
            tooltip=["weather", "date"],
            overlay_point=True,
            title="Seattle Weather",
            height=300,
            width=500,
        )
    elif dataset == "gapminder":
        return gr.LinePlot(
            gapminder,
            x="year",
            y="life_expect",
            color="country",
            title="Life expectancy for countries",
            stroke_dash="cluster",
            x_lim=[1950, 2010],
            tooltip=["country", "life_expect"],
            stroke_dash_legend_title="Country Cluster",
            height=300,
            width=500,
        )

custom_red = Color(
    name="custom_red",
    c50="#f50505",
    c100="#f50505",
    c200="#f50505",
    c300="#f50505",
    c400="#f50505",
    c500="#f50505",
    c600="#f50505",
    c700="#f50505",
    c800="#f50505",
    c900="#f50505",
    c950="#f50505",
)

class Style(Base):
    def __init__(
        self,
        *,
        primary_hue: Union[colors.Color, str] = custom_red,
        secondary_hue: Union[colors.Color, str] = custom_red,
        neutral_hue: Union[colors.Color, str] = custom_red,
        spacing_size: Union[sizes.Size, str] = sizes.spacing_md,
        radius_size: Union[sizes.Size, str] = sizes.radius_md,
        text_size: Union[sizes.Size, str] = sizes.text_md,
        font: Union[fonts.Font, str, Iterable[Union[fonts.Font, str]]] = (fonts.GoogleFont("Sora")),
        font_mono: Union[fonts.Font, str, Iterable[Union[fonts.Font, str]]] = (fonts.GoogleFont("Sora")),
    ):
        super().__init__(
            primary_hue=primary_hue,
            secondary_hue=secondary_hue,
            neutral_hue=neutral_hue,
            spacing_size=spacing_size,
            radius_size=radius_size,
            text_size=text_size,
            font=font,
            font_mono=font_mono,
        )
        super().set(
            background_fill_primary="#050f19", #The color of the background of blocks
            background_fill_secondary="#050f19",
            block_background_fill="#050f19", #The color of the background of blocks
            block_background_fill_dark="#050f19",
            
            border_color_primary="#050f19", #The border of a block such as dropdown 
            border_color_primary_dark="#050f19",
            
            link_text_color="#f0ba2d", #The color for links
            link_text_color_dark="#f0ba2d",
            
            block_info_text_color="ffffff",
            block_info_text_color_dark="ffffff",
            
            block_border_color="#050f19", #The border color around an item (e.g. Accordion)
            block_border_color_dark="#050f19",
            block_shadow="*shadow_drop_lg",
            #form_gap_width="*spacing_md", #The border gap between form elements, (e.g. consecutive textboxes)
            
            input_background_fill="#081527", #The background of an input field
            input_background_fill_dark="#081527", 
            input_border_color="#050f19",
            input_border_color_dark="#050f19",
            input_border_width="2px", 
            
            block_label_background_fill="#f0ba2d",
            block_label_background_fill_dark="#f0ba2d",
            block_label_border_color=None,
            block_label_border_color_dark=None,
            block_label_text_color="#050f19",
            block_label_text_color_dark="#050f19",
            
            button_primary_background_fill="#ffffff",
            button_primary_border_color="#ffffff",
            button_primary_text_color="#050f19",
            button_shadow="*shadow_drop_lg",
            
            block_title_background_fill="#f0ba2d", #The background of the title of a form element (e.g. textbox).
            block_title_background_fill_dark="#f0ba2d", #The corner radius of the title of a form element (e.g. textbox).
            block_title_radius="*radius_sm",
            block_title_text_color="#050f19", #The text color of the title of a form element (e.g. textbox).
            block_title_text_color_dark="#050f19",
            block_title_text_size="*text_lg",
            
            body_background_fill="#050f19",
            body_background_fill_dark="#050f19",
            body_text_color="#ffffff", #The default text color.
            body_text_color_dark="#ffffff",
            body_text_color_subdued="#ffffff",
            body_text_color_subdued_dark="#ffffff",
            
            slider_color="*secondary_300",
            slider_color_dark="*secondary_600",
        )
style = Style()

with gr.Blocks(theme=style) as demo:
    with gr.Row():
        with gr.Column():
            dataset = gr.Dropdown(
                choices=["stocks", "climate", "seattle_weather", "gapminder"],
                value="stocks",
            )
        with gr.Column():
            plot = gr.LinePlot()
    dataset.change(line_plot_fn, inputs=dataset, outputs=plot)
    demo.load(fn=line_plot_fn, inputs=dataset, outputs=plot)

if __name__ == "__main__":
    demo.launch()

[aliabid94]

Should be fixed as of #8550, install via pip install https://gradio-builds.s3.amazonaws.com/271c4e87938f35a1ec686bb51dde812e5106cd57/gradio-4.36.1-py3-none-any.whl.

Feel free to close this issue if it solves your problem, otherwise please provide a full reproducible demo (I could not run your code in isolation).