Not able to load colors property in colab notebooks

[ARusterholz-edu]

Describe the bug

'gradio' has no attribute 'colors'

I am getting the above error when trying to include any kind of custom theme information using .Color() in my python notebooks

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

dark_purple_theme = gr.Theme(
    primary_hue=gr.colors.Color("#6A0DAD"),  
    secondary_hue=gr.colors.Color("#9B30FF"), 
    neutral_hue=gr.colors.Color("#2D2D2D"),  
    text_size=gr.sizes.Size("md"),  
    spacing_size=gr.sizes.Size("md"),  
    radius_size=gr.sizes.Size("sm"),  
    font=gr.fonts.Font(["Segoe UI", "Roboto", "sans-serif"]),  
    font_mono=gr.fonts.Font(["Consolas", "monospace"]) 
)

# Initialize a Blocks context with Tabs
with gr.Blocks(theme=dark_purple_theme) as demo:

Screenshot

No response

Logs

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
<ipython-input-9-2982247ac403> in <cell line: 196>()
    195     return output
    196 dark_purple_theme = gr.Theme(
--> 197     primary_hue=gr.colors.Color("#6A0DAD"),  # Deep purple for primary elements
    198     secondary_hue=gr.colors.Color("#9B30FF"),  # Lighter purple for secondary elements
    199     neutral_hue=gr.colors.Color("#2D2D2D"),  # Dark shade for neutral background

AttributeError: module 'gradio' has no attribute 'colors'

System Info

Requirement already satisfied: mdurl~=0.1 in /usr/local/lib/python3.10/dist-packages (from markdown-it-py>=2.2.0->rich<14.0.0,>=10.11.0->typer[all]<1.0,>=0.9->gradio) (0.1.2)
Installing collected packages: gradio
Successfully installed gradio-4.21.0

Severity

Blocking usage of gradio

[freddyaboulton]

Hi @ARusterholz-edu ! Please use gr.themes.Color. Where did you learn of the gr.colors syntax? I recommend you try theme builder space. It lets you create a theme visually and it will give you the correct code to create it outside the space - https://huggingface.co/spaces/gradio/theme_builder

[ARusterholz-edu]

Hi @ARusterholz-edu ! Please use gr.themes.Color. Where did you learn of the gr.colors syntax? I recommend you try theme builder space. It lets you create a theme visually and it will give you the correct code to create it outside the space - https://huggingface.co/spaces/gradio/theme_builder

Apologies, I was originally using themebuilder and the gr.themes.Color() syntax. I used the theme builder to build a theme, which I then exported like this:

theme = gr.themes.Base( primary_hue=gr.themes.Color(primary_100="#480048", primary_200="#601848", primary_300="#c04848", primary_400="#f07241", primary_50="#300030", primary_500="#fdcfbf", primary_600="#feb89f", primary_700="#e23d75", primary_800="#5f0d3b", primary_900="#881337", primary_950="#742365"), ).set( body_text_weight='300', background_fill_primary='primary_500', background_fill_primary_dark='primary_200', background_fill_secondary='primary_600', background_fill_secondary_dark='primary_50', border_color_accent='primary_500', border_color_accent_dark='primary_200', border_color_accent_subdued_dark='primary_100', border_color_primary='primary_200', border_color_primary_dark='primary_900', color_accent_soft_dark='primary_100' )

However, this code gave the same error that "themes" is not available. I looked at the themes documentation again and saw

Which made me try colors.Color(). I am still having the issue of not being able to load colors in my colab notebooks. I first tried the theme builder but was not able to use its output.

[abidlabs]

There indeed seems to be some issue when defining a custom color palette. I just tried the theme builder and it gave me:

import gradio as gr

theme = gr.themes.Base(
    primary_hue="gray",
    neutral_hue=gr.themes.Color(neutral_100="#f3f4f6", neutral_200="#e5e7eb", neutral_300="#d1d5db", neutral_400="#9ca3af", neutral_50="#4394e5", neutral_500="#6b7280", neutral_600="#4b5563", neutral_700="#374151", neutral_800="#1f2937", neutral_900="#111827", neutral_950="#0b0f19"),
).set(
    background_fill_primary='*primary_100'
)

with gr.Blocks(theme=theme) as demo:
    ...

But running this gives me the following error:

TypeError: Color.__init__() got an unexpected keyword argument 'neutral_100'

Is this the same error you are seeing @ARusterholz-edu?

[ARusterholz-edu]

Yes this is the error I’ve been having. I have not found a solution still

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Abubakar Abid @.> Sent: Friday, March 15, 2024 8:55:00 AM To: gradio-app/gradio @.> Cc: Adam Rusterholz @.>; Mention @.> Subject: Re: [gradio-app/gradio] Not able to load colors property in colab notebooks (Issue #7688)

EXTERNAL SENDER. Only open links and attachments from known senders. DO NOT provide your username, password, or any other personal information.

There indeed seems to be some issue when defining a custom color palette. I just tried the theme builder and it gave me:

import gradio as gr

theme = gr.themes.Base( primary_hue="gray", neutral_hue=gr.themes.Color(neutral_100="#f3f4f6", neutral_200="#e5e7eb", neutral_300="#d1d5db", neutral_400="#9ca3af", neutral_50="#4394e5", neutral_500="#6b7280", neutral_600="#4b5563", neutral_700="#374151", neutral_800="#1f2937", neutral_900="#111827", neutral_950="#0b0f19"), ).set( background_fill_primary='*primary_100' )

with gr.Blocks(theme=theme) as demo: ...

But running this gives me the following error:

TypeError: Color.init() got an unexpected keyword argument 'neutral_100'

Is this the same error you are seeing @ARusterholz-eduhttps://github.com/ARusterholz-edu?

— Reply to this email directly, view it on GitHubhttps://github.com/gradio-app/gradio/issues/7688#issuecomment-1999718609, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BDFS55AYX6IET56MXUVQZYLYYL4TJAVCNFSM6AAAAABEU2FBOGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOJZG4YTQNRQHE. You are receiving this because you were mentioned.Message ID: @.***>

[shubhamofbce]

@ARusterholz-edu Here's a workaround, you just need to replace neutral_ or primary_ or secondary_ with c in the gr.themes.Color() like this and then it will work as expected.

theme = gr.themes.Base(
    primary_hue="gray",
    neutral_hue=gr.themes.Color(c100="#f3f4f6", c200="#e5e7eb", c300="#d1d5db", c400="#9ca3af", c50="#4394e5", c500="#6b7280", c600="#4b5563", c700="#374151", c800="#1f2937", c900="#111827", c950="#0b0f19"),
).set(
    background_fill_primary='*primary_100'
)

Our theme builder is not generating correct arguments, I am working on fixing it. Till then you can just use the workaround for your themes.

[shubhamofbce]

@ARusterholz-edu I have fixed this issue on my hf space https://huggingface.co/spaces/shubhamofbce/theme-color-fix You can generate your theme here till i am fixing it in the official repo. Let me know if you see any other issue while generating theme using my space.

[abidlabs]

Thanks @shubhamofbce for providing the fix. Feel free to open a PR here and we're happy to review :)

[abidlabs]

Closed via #7756, thanks folks!