2 2 Theming Explained

Key Concepts

• Theming: Customizing the appearance of a Streamlit application.
• Primary Color: The main color used throughout the application.
• Background Color: The color of the application's background.
• Text Color: The color of the text displayed in the application.
• Custom CSS: Using custom CSS to further customize the application's appearance.

Explanation

1. Theming

Theming in Streamlit refers to the process of customizing the appearance of your application. This includes changing colors, fonts, and other visual elements to match your brand or personal preference.

2. Primary Color

The primary color is the main color used throughout your Streamlit application. This color is often used for buttons, links, and other interactive elements. You can set the primary color using the primaryColor parameter in the st.set_page_config function.

3. Background Color

The background color is the color of the application's background. This color sets the overall tone of your application and can be customized using the backgroundColor parameter in the st.set_page_config function.

4. Text Color

The text color is the color of the text displayed in your application. This color should be chosen to ensure readability against the background color. You can set the text color using the textColor parameter in the st.set_page_config function.

5. Custom CSS

Custom CSS allows you to further customize the appearance of your Streamlit application. By injecting custom CSS, you can change the style of specific elements, add animations, or create unique visual effects.

Examples

Example 1: Basic Theming

import streamlit as st

st.set_page_config(
    page_title="Custom Themed App",
    page_icon="🎨",
    layout="wide",
    initial_sidebar_state="expanded",
    menu_items={
        'Get Help': 'https://www.example.com/help',
        'Report a bug': "https://www.example.com/bug",
        'About': "# This is a header. This is an *extremely* cool app!"
    },
    primaryColor="#FF5733",
    backgroundColor="#F0F0F0",
    textColor="#333333"
)

st.title("Custom Themed App")
st.write("This is a custom themed Streamlit application.")
    

Example 2: Custom CSS

import streamlit as st

st.set_page_config(
    page_title="Custom CSS App",
    page_icon="🎨",
    layout="wide",
    initial_sidebar_state="expanded",
    menu_items={
        'Get Help': 'https://www.example.com/help',
        'Report a bug': "https://www.example.com/bug",
        'About': "# This is a header. This is an *extremely* cool app!"
    }
)

custom_css = """

"""

st.markdown(custom_css, unsafe_allow_html=True)

st.title("Custom CSS App")
st.write("This is a Streamlit application with custom CSS.")
    

Analogies

Think of theming as painting a room. The primary color is like the main color on the walls, the background color is like the color of the ceiling, and the text color is like the color of the furniture. Custom CSS is like adding decorative elements like wallpaper or curtains to make the room unique.

By mastering theming in Streamlit, you can create visually appealing and cohesive applications that reflect your brand or personal style.