FAQ: How to customize the style or appearance of your Streamlit app

FAQs
1

Problem

You want to customize the style or appearance of your Streamlit app. Let’s explore some of the options that you can take to achieve this.

Solution

1. Native Theming support

Streamlit page elements are affected by the various theme configuration options that can be specified in the [theme] section of .streamlit/config.toml file.

Consequently, you can change the color and fonts of text and background color:

[theme]
primaryColor="#F63366"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#262730"
font="sans serif"

For more information, refer to this Streamlit Docs on Theming

2. Streamlit Components

Streamlit components are third-party libraries released by community members that extend what’s possible with the base Streamlit package. Those who want to build their own component can see this Docs to get started. A gallery of components is provided and for those related to page elements, you can check out the Page navigation section.

streamlit-extras is a great component created by Streamlit’s Data Scientist Arnaud Miribel that provides additional visual additions such as badges, vertical spaces and card display.

3. CSS styling

To further customize the app, you can use CSS customization. This allows you to make detailed adjustments to the app’s appearance through CSS styling. While using custom CSS with Streamlit is safe, it’s not officially endorsed. Consequently, the class names and IDs of Streamlit widgets and page elements might change in future releases, thereby necessitating updates to your custom CSS to maintain consistent styling.

To allow the Streamlit app to use CSS style information, you’ll need to embed them within a <style> HTML tag. This can be achieved by using the unsafe_allow_html optional keyword of st.markdown or st.write as shown below:

Consider the following simple example of customizing the font size, text alignment and text letter case of the <h1> tag:

st.markdown("""
<style>
   h1 {
      font-size: 16px;
      text-align: center;
      text-transform: uppercase;
   }
</style>
""", unsafe_allow_html=True)

There are also several other specific use cases of CSS styling in the forum that you can look into for ideas as well as tutorial videos on how to implement these in a step-by-step fashion.

Here are further resources to look into:

Forum posts on CSS styling

YouTube videos on CSS styling

4. Jinja templates

Jinja HTML templates can also be rendered in a Streamlit app via the components.html method. An example of Jinja in Streamlit is provided by ferdy, a Streamlit Community Moderator.

2 Likes