search

gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
32.02k stars 2.39k forks source link

Use 100% Custom CSS for Gradio Components #8924

Open yangyu opened 1 month ago

yangyu commented 1 month ago

Is your feature request related to a problem? Please describe.
Yes, I find that all components will use the theme CSS somehow(custom CSS always been overwirte by others even with !important ) which limited the extention of use custom CSS.

Describe the solution you'd like
My thought is that If you can provide a flag to control whether use the theme CSS or not in components like :

button = gr.Button(ignore_theme_css=True,element_id="mybtn")

If it is been set then do not use any CSS of default theme or any theme for this component. This will allow user to config their Custom CSS to complete fit to their style.

Additional context

abidlabs commented 1 month ago

Hi @yangyu have you tried setting theme="base" in your Gradio app (it is a parameter in Blocks)?

yangyu commented 1 month ago

Hi @yangyu have you tried setting theme="base" in your Gradio app (it is a parameter in Blocks)?

Yes, I tried. And I found that the css .dark will be apply anyway which will use default theme to overwrite all. So it is not possible to use custom css 100%.

ketsapiwiq commented 1 month ago

Hi, yes I have the same problem where I heavily rely on custom css and custom components to change the appearance. I had also a weird behavior with the css .dark. I would be so happy if there's just a way to disable ALL css defined by Gradio themes: a Theme=None. So there would still be the CSS added by Svelte in each component I guess. But you can still fork them to create a no-style generic custom component I guess. The problem is when there are added styles for top-level DOM elements that you have to counter with !important.

Thanks for any effort in that direction :)