Understanding theming and .toml files

At the beginning of this chapter, in the Understanding new features related to deep customization section, we learned how to change the theme of our web apps directly from the browser. Streamlit has supported natively custom theming since version 0.79.0, which means that we can customize our theme directly from the backend without working in the browser.

We’ve already seen that there is a hidden directory named .streamlit and that inside this directory, there is a file named config.toml.

If we want to customize the theme, first of all, we must open this config.toml file, then add the following instructions to it:

Figure 14.14: Theme configuration with the config.toml file

The configuration in Figure 14.14 is the classical light theme. If you want to have a completely different effect, you can use your preferred color codes and choose a font between Sans-serif, Serif, or Monospace. To get a quick indication of color codes, try to look for HTML Color Codes on the internet or check a website such as https://html-color.codes/.

For example, let’s say we adopt the following HTML color codes:

Figure 14.15: A completely different theme configuration

We will get a rather strong result, as shown in the following figure:

Figure 14.16: A rather strong theme with a Monospace font

Very simple! Customizing the theme is just a matter of using HTML color codes and a TOML file. Now, let’s learn what multi-pages are.

Exploring the multi-pages feature

Multi-pages in Streamlit are a way to organize your app into multiple pages, each with its own content. This can be useful for large apps with a lot of functionalities, or for apps that need to be divided into different sections for different users.

To create a multi-page app in Streamlit, you simply need to create a new folder called pages in the same folder as your main app file. Then, create new Python files inside the pages folder, each of which will represent a different page in your app.

Once you have created your pages, you can start adding content to them. You can use any Streamlit widgets and functions that you want, just like you would in a regular Streamlit app.

When you run your app, Streamlit will automatically detect the pages in the pages folder and add them to a navigation bar in the sidebar. Users can then click on the different pages to navigate between them.

According to the preceding explanation, everything sounds easy; as we are going to see, it really is.