Hello there 👋

Thanks for stopping by! We use cookies to help us understand how you interact with our website.

By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.

  1. Contents
  2. Example themes
  3. Working with theme configuration during development

Theming overview

In this guide, we provide an overview of theming and visual customization of Streamlit apps. Streamlit themes are defined using configuration options, which are most commonly defined in a .streamlit/config.toml file. For more information about setting configuration options, see Working with configuration options. For a complete list of configuration options and definitions, see the API reference for config.toml.

The following options can be set in the [theme] table of config.toml and can't be set separately in the [theme.sidebar] table:

  • Base color scheme: Set your custom theme to inherit from Streamlit's light or dark theme.
  • Base font: Set the base font weight and size. (This can be configured separately for heading and code font.)
  • Chart color: Set series colors for Plotly, Altair, and Vega-Lite charts.
  • Sidebar border: Set the visibility of the sidebar border.

The following options can be configured separately for the main body of your app and the sidebar:

  • Font family: Set the font family for body text, headings, and code.
  • Font style: Set the weight and size of heading and code font, and set visibility of link underlines.
  • Text color: Set the color of body text and links.
  • Primary color: Set the color of interactive elements and highlights.
  • Background color: Set the color of app, widget, code block, and dataframe header backgrounds.
  • Border radius: Set the roundness of elements and widgets.
  • Border color: Set the color and visibility of element, widget, sidebar, and dataframe borders.

Example themes

The following light theme is inspired by Anthropic.

Built with Streamlit 🎈

The following dark theme is inspired by Spotify.

Built with Streamlit 🎈

Working with theme configuration during development

Most theme configuration options can be updated while an app is running. This makes it easy to iterate on your custom theme. If you change your app's primary color, save your config.toml file, and rerun your app, you will immediately see the new color. However, some configuration options (like [[theme.fontFace]]) require you to restart the Streamlit server to reflect the updates. If in doubt, when updating your app's configuration, stop the Streamlit server in your terminal and restart your app with the streamlit run command.

Previous: Serving static filesNext: Customize colors and borders
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.