Is there a way to force the dark mode theme in Gradio?

[FurkanGozukara]

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")

[abidlabs]

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()

[FurkanGozukara]

@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

[peeter2]

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. How come websites that are black by default are not changed to light when dark mode is switched off? Go figure.

[n0valis]

"we don't provide a default way to do this" I think you should allways leave that to the user. There are many good reasons to switch to dark mode, (eyes, energy, etc.). And Dark Mode is very popular nowadays. So why not offer a switch or a cinfig?

[abidlabs]

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.

[n0valis]

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.

[abidlabs]

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 ?__theme=dark to the end of the Gradio app's url

[n0valis]

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...

[abidlabs]

That's strange, are you running a Gradio app locally or on Hugging Face Spaces?

[n0valis]

In an App called Clean-UI. There is a setting in the python file visual_theme = gr.themes.Monochrome() # Default, Soft or Monochrome which in fact does not change the background.

[n0valis]

I have to correct myself: In Firefox it listens to the settings and comes in dark, in Chrome it doesn't.

[Mon-ius]

not work for V5.0

[Ethan-yt]

not work for V5.0

@abidlabs

[abidlabs]

Fixed in https://github.com/gradio-app/gradio/pull/9716, we should have a release out soon