-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is there a way to force the dark mode theme in Gradio? #7384
Comments
Hi @FurkanGozukara we don't encourage forcing dark mode in a Gradio app for accessibility reasons, and we don't provide a default way to do this. However, if you really want to do this, you can add some custom js: import gradio as gr
js_func = """
function refresh() {
const url = new URL(window.location);
if (url.searchParams.get('__theme') !== 'dark') {
url.searchParams.set('__theme', 'dark');
window.location.href = url.href;
}
}
"""
with gr.Blocks(js=js_func) as demo:
demo.launch() |
@abidlabs i agree i would never force it. but one of my follower asked me how he can make it easy. that would be great if you have added it. so i could optionally let them pick from my .bat app starters thank you for example |
How to disable dark mode? I don't like it. It should always be light. On iphone when the phone settings are set to dark mode then the gradio app is always on a black background. |
"we don't provide a default way to do this" |
Our goal with Gradio is let developers easily build machine learning apps that follow best practices for web applications, from security to accessibility. There are accessibility reasons to support a light mode, e.g. https://medium.com/@h_locke/why-dark-mode-causes-more-accessibility-issues-than-it-solves-d2f8359bb46a so we highly recommend that you let users set their own preferences for light/dark mode. Of course, if you really want to, you can override this with your own custom js/css but any built-in configuration in Gradio will support both. |
I don't understand what you mean. Nobody says that you shouldn't support light mode. The problem is that you don't support dark mode. You don't document it, you don't have a config option and you don't have a switch in the UI. |
Oh I think there's confusion here, we absolutely do support dark mode -- Gradio reads light/dark mode from your system / browser settings, so if you set your browser setting to dark mode, the Gradio app will render in dark mode. Or you can add |
Hm that's strange, because I assumed that it would read the browser settings. But in my chrome and in my Firefox settings are dark mode, in both cases, the gradio ui is white. I know about the url addition but I found that out only from this issue post. No docs... |
That's strange, are you running a Gradio app locally or on Hugging Face Spaces? |
In an App called Clean-UI. |
I have to correct myself: In Firefox it listens to the settings and comes in dark, in Chrome it doesn't. |
not work for V5.0 |
not work for V5.0 |
Fixed in #9716, we should have a release out soon |
this is working but aren't there a better way of doing this now?
http://127.0.0.1:7860/?__theme=dark
Like modifying
with gr.Blocks(css=css,theme="dark") as demo:
or
demo.launch(inbrowser=True, share=share,theme="dark")
The text was updated successfully, but these errors were encountered: