Themes

Overview

So far in the course, we have been using the default theme that comes with Gradio. Gradio has made it easy to customize the themes and layouts. This includes changing colors used, text sizes, fonts, border widths, and so much more. Let’s dive into what themes are offered in Gradio, and how we can customize them for our applications!

Default themes

Gradio has made it extremely easy to change the look of applications with some prebuilt themes. Under the hood, many CSS variables are responsible for how the application looks. We can customize each of these CSS variables to alter the application’s appearance. However, this understandably is time-consuming and also more difficult for the average user. Instead, we have some prebuilt themes, which have set values for a variety of CSS variables, to give a predesigned appearance for our applications. The prebuilt themes include:

• gr.themes.Base()

• gr.themes.Default()

• gr.themes.Glass()

• gr.themes.Monochrome()

• gr.themes.Soft()

Changing the theme of our applications requires just one line of code change. Both the Block and Interface constructor have a parameter theme, which can be set to one of these prebuilt themes. Let's revisit our property viewer application, and try using the Soft theme.