Python backend to theming

[aliabid94]

Created python backend that will allow users to create and modify backends from python. User's can specify existing themes as:

with gr.Blocks(theme=gr.themes.Solid) as demo:
    pass

and they can modify themes, with full type hints, via:

theme = gr.themes.Default()
theme.color_focus_primary = "#aaaaaa"

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

Here's how it works:

1. Themes are stored in gradio/theming/configs as jsons
2. gradio/theming/_gen_themes.py converts these jsons into python classes. Each css variable is converted into an attribute of the class
3. These python classes can be imported, modified, etc.
4. When passed a Theme class, Blocks will generate the css from the attributes.
5. This css file will be accessed via localhost:7860/theme.css

Currently the best way I could think of implementing, lmk what you guys think.

Example running demo/blocks_xray below:

(for some reason, vscode isn't type hinting the theme attributes for me, will figure out. For now looking for feedback on general implementation_

Closes: #2354

[aliabid94]

Theming ready for review! New API:

• Import themes from gradio.themes and set them in Blocks/Interface constructor, e.g. gr.Blocks(theme=gr.themes.Soft())
• Themes have six constructor arguments for high-level control of look and feel.
  • Colors: primary_hue, secondary_hue, and neutral_hue. Each of these is a gr.themes.utils.Color object, which is a palette ranging from 50-900
  • Sizes: spacing_size, text_size, radius_size. Each of these is a gr.themes.utils.Size object, which a size list ranging from xxs to xxl.
  • For example, gr.themes.Default(primary_hue=gr.themes.utils.green)
• The ~200 theme variables can be set via the set method
  • For example, gr.themes.Default(primary_hue=gr.themes.utils.green).set(block_background="blue")
  • Theme variables can refer to each other, or the six constructor arguments, with an asterisk prefix.
  • For example, gr.themes.Default(primary_hue=gr.themes.utils.green).set(block_background="*primary_500", checkbox_label_background="*block_background")
• Dark mode variables have a _dark suffix
  • For example gr.themes.Default(primary_hue=gr.themes.utils.green).set(block_background="*primary_500", block_background_dark="*neutral_800")

Also created the blocks_kitchen_sink demo. which showcases all Gradio features, and easy controls to toggle between themes and dark mode.

[freddyaboulton]

@aliabid94 This is awesome 👏

I like how you can set high-level theme attributes but then override the values for specific fields.

Creating themes via python is hard (I had to look at the svelte files to know what I was modifying) but that's not really related to the api and the theme builder can take care of making it easier.

Left a couple of nits. Thanks!

[freddyaboulton]

nit: I would add type hints here and for Color.

[pngwn]

This is in the wrong place.

[abidlabs]

Looks really good @aliabid94! My one feedback (copied from Slack) is:

The theming works really well, no issues I could find. My main pain point was importing the colors and the sizes for the constructor. It would be really, really nice if you could pass in string shortcuts for all of the arguments, and they get mapped appropriately:
"blue" --> gr.themes.utils.blue
"sm" --> gr.themes.utils.size.radius_sm
and so on

Let's merge this in after we've released 3.20!

[freddyaboulton]

The new styles look good to me @aliabid94 ! Only thing I noticed missing is the comment about queue=False and not deleting style prop from the component. Not sure what you and @dawoodkhan82 agreed to.

If color_map is deprecated, is there a way to target the chatbot bubble colors with the python theming api? I don't think so but want to make sure.

[aliabid94]

I noticed missing is the comment about queue=False

Sorry, what comment?

and not deleting style prop from the component. Not sure what you and @dawoodkhan82 agreed to.

Restored the style prop to chatbot (without color_map)

If color_map is deprecated, is there a way to target the chatbot bubble colors with the python theming api? I don't think so but want to make sure.

The colors for the chatbot inherit from theme values as such:

.bot,
.pending {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-secondary);
}
.user {
  border-color: var(--color-border-accent);
  background-color: var(--color-accent-soft);
}

Users can modify these theme variables, or for more control, hijack with the CSS kwarg.

[freddyaboulton]

@aliabid94 Thanks for responding + clarifying the new css variables for the chatbot!

That comment was meant to go to this PR #3370 lol sorry about that 🙈

This PR looks good to me though!

[aliabid94]

Thanks everyone! Finally merging