streamlit themes

Streamlit Themes – How to Customize Your Streamlit Apps

Streamlit has done it again, it has introduced a long awaited feature request – Themes. The ability to change the look of streamlit apps is now possible with the Streamlit Themes.

To enjoy this feature you will need to update your streamlit to version 0.79 and upwards

pip install –upgrade streamlit

Streamlit Themes

The new update brings three main themes

  • Light Theme
  • Dark Theme
  • System Theme*

It also gives you the option of editing and customizing your own theme and saving it in a config.toml file to persist it anytime you run your streamlit app.

In order to change the default theme all you need is to go to the settings and choose any of these themes.

You can now choose any of the themes in the Theme section

Dark Theme
Light Theme

You can also edit any of the selected themes by clicking on the Edit Active Theme

You can edit each of the 5 parts of the app. Below is the key to what each component of the theme settings does. You can see what each section and where to modify to produce the customization you want.

Awesome right.

Now in case you want to persist the modification to use it another time you can copy the theme to clipboard and create a config.toml file inside .streamlit folder on your system. This folder is a hidden folder so in Unix based system you will need to go to the home folder and press CTRL + H to unhide them.

Then move into the .streamlit folder and create the config.toml file. You can now paste the theme details to this config.toml file.

[theme]
 primaryColor="#3872fb"
 backgroundColor="#0e1117"
 secondaryBackgroundColor="#cece1b"
 textColor="#fafafa"
 font="sans serif"

Any time you start your streamlit app you will have access to your custom theme as one of the options for your streamlit themes. So in short you will see Custom Theme as part of the 3 main themes.

Streamlit is awesome. You can also check the video tutorial below. Happy Streamliting

Thanks For Your Time

Jesus Saves

By Jesse E.Agbe(JCharis)

Leave a Comment

Your email address will not be published. Required fields are marked *