Announcing Theming for Streamlit apps! 🎨

We like to think Streamlit apps are beautiful out of the box (hopefully you do too!), but up until today it wasn't easy to change the look and feel to reflect your personal style or your company's visual branding. Streamlit Theming now allows you to easily change the color scheme and fonts in your app without ever having to touch any HTML or CSS.

In addition, for accessibility and user-friendliness, we're also giving app viewers the ability to toggle between light and dark themes.

Check out this sample app if you want to jump right in!

Introducing Dark Mode!

Before we get into custom themes, let's talk about dark mode.

By popular demand, we now provide app viewers the ability to customize how they'd like to experience your app. This is useful for people who are using the app in a dark environment, or for folks with accessibility needs, who want to override your app's custom theme.

To toggle between various themes, go to Menu on the top-right corner and choose Settings. There you'll see a redesigned Settings dialog that lets app users choose between different theme options:

  • Light Mode: This is the Streamlit theme you already know and love
  • Dark Mode: This is Streamlit's new dark theme. You'll love this too!
  • Use system setting: Streamlit will automatically pick up your Operating System theme (light or dark) and change colors with your OS (Note: may not work for some browsers and Linux distros).
  • Custom theme (only visible when provided by the app author): Use the theme provided by the app author. This is the default when provided. Otherwise, "Use system setting" is the default.

Creating custom themes

Themes are set via Streamlit's config system. You can either set the theme there directly, or you can use our fancy new theme editor interface to build a theme live and then copy it to your config.

Creating a theme with the theme editor

App developers can create a custom theme by simply going to Menu → Settings → Edit Active Theme.

Creating a theme using config.toml directly

Custom themes can also be defined in the config file: ./.streamlit/config.toml

Under the [theme] section, colors variables can be defined to create a custom theme

[theme]
# Primary accent for interactive elements
primaryColor = '#7792E3'
# Background color for the main content area
backgroundColor = '#273346'
# Background color for sidebar and most interactive widgets
secondaryBackgroundColor = '#B9F1C0'
# Color used for almost all text
textColor = '#FFFFFF'
# Font family for all text in the app, except code blocks
# Accepted values (serif | sans serif | monospace) 
# Default: "sans serif"
font = "sans serif"

(Note: you can only set one custom theme at a time)

Live updates from the Config file

You know how your Streamlit app live-updates when you change its source code? We now also do this when you update the app's config file! This way, editing the theme directly in the config file will cause your app to immediately display the new theme.

What each color setting does

Streamlit's theming system follows a global approach to applying color and fonts to an app. Color styles have semantic names and a simple way for doing color specification.

  • Primary color: Accent color for interactive elements like st.radio, button borders etc. By default, this is pink.
  • Background color: This is the background color for the main body of your app.
  • Text color: Pretty self-explanatory! This is the text color for your app.
  • Secondary background color: Used as the background for st.sidebar and for several widgets.

Background color and Secondary background color are in a way "complementary" since they are used for elements placed "on" top of base elements to promote consistency and accessible contrast. This means that a st.number_input widget will use Secondary background color as its Background color when defined in the main body, but use Background color when defined in the sidebar. The image below illustrates this:

Themes and Custom Components

If you're a component author, we make it easy for you to read theme colors in your JS and CSS code. To get access to this new feature, install or update the newest version of streamlit-component-lib.

npm install streamlit-component-lib

Once this package is updated, the background and text colors of a component will automatically be changed to match that of the active theme. Additional theme properties are exposed to the component in two equivalent ways: the theme object or the theme style.

As a React prop

An object passed to the component via the theme prop has the following shape:

{
    "primaryColor": "someColor1"
    "backgroundColor": "someColor3",
    "secondaryBackgroundColor": "someColor4",
    "textColor": "someColor5",
    "font": "someFont",
}

As CSS variables

--primary-color
--background-color
--secondary-background-color
--text-color
--font

If you're not familiar with CSS variables, the TLDR version is that you can use them like this:

.mySelector {
  color: var(--text-color);
}

The two methods for exposing theme properties to a component contain the same information, so which one to use is a matter of personal preference. An example of making a custom component work with themes can be found here.

Find your favorite new theme

Here's our Mapping Demo, with a 'Quiet Light'-inspired theme:

[theme]
primaryColor="#6eb52f"
backgroundColor="#f0f0f5"
secondaryBackgroundColor="#e0e0ef"
textColor="#262730"
font="sans serif"

Here's an example of a 'Solarized'-inspired theme:

[theme]
primaryColor="#d33682"
backgroundColor="#002b36"
secondaryBackgroundColor="#586e75"
textColor="#fafafa"
font="sans serif"

Try out theming and let us know what you think!

To try out theming, simply upgrade to the latest version of Streamlit as usual:

$ pip install streamlit --upgrade

We can't wait to see the cool and amazing themes that the community will build. If you built a cool custom theme, we'd love to see it, so please tag @streamlit when you share on Twitter, LinkedIn or on our Forum.

Resources


This is a companion discussion topic for the original entry at https://blog.streamlit.io/introducing-theming/
10 Likes

Great Intro! :partying_face:

Can’t wait to see what the beautiful themes the community makes! :smile_cat: :art::framed_picture:

Happy Streamlit-ing!
Marisa

1 Like

I have wanted the Dark Mode and Custom theme option for so long!!
Thanks for bringing it to fruition.
This going to really help enhance web-apps with custom themes!

2 Likes

This is awesome guys. Quick question regarding creating a theme within the theme editor.

It says were are suppose to paste it into the [theme] section of your .streamlit/config.toml file.

How can I deploy the theme using Streamlit Sharing?

The documentation says the following, but I am not sure how to push the changes in the config to my repo:
The theme editor menu is available only in local development. If you’ve deployed your app using Streamlit Sharing, the “Edit active theme” button will no longer be displayed in the “Settings” menu.

Appreciate the help.

Again great job guys!

1 Like

Hey @navido89 ! You can just create a .streamlit/config.toml file in your repo, in the same folder as your main Python file, and paste the theme in there.

See this app’s source, for an example how to do it:

2 Likes

@thiago brilliant I was able to get it going. Thank you so much for sending the example. I really appreciate it!

2 Likes

wow this is amazing! I think I spent 1-2 hours making a custom css file a couple weeks to overwrite the pink light theme so that the streamlit dashboard matched our company’s corporate colour. And even that wasn’t perfect, some widgets like the sliders were a nightmare to try and customize. I just wish I had waited a week or two haha! Can’t wait to try out more custom themes.

1 Like

This is awesome! Can’t wait to add custom themes to my app. Although the default dark theme is already pretty cool. :fire:
One quick question though. Can we implement a drop down to let users choose a theme from the main page instead of digging around in the settings option?

1 Like

This is fantastic! thanks so much.

1 Like

So good news! Thanks for the implementations! :grin:!

1 Like

i really waited so long for this, ty: D

1 Like

Hi,

The Custom theme option is available while running the code in local, but when I deploy the app to heroku, it’s only showing either the light or the dark theme option. “Custom theme” option is not available.

Any help would be appreciated!

1 Like

Hey, i got the solution, just posting here in case anyone faces the similar issue.

when you want to deploy to heroku, there is a file called setup.sh, which creates .streamlit/config.toml

so the custom theme changes we want, shud be edited in that file

for e.g,
“setup.sh” would look like this:

mkdir -p ~/.streamlit/

echo "
[general]\n
email = “your-email@domain.com”\n
" > ~/.streamlit/credentials.toml

echo "
[server]\n
headless = true\n
enableCORS=false\n
port = $PORT\n
[theme]\n
primaryColor="#08424f"\n
backgroundColor="#08424f"\n
secondaryBackgroundColor="#0d5a6a"\n
textColor="#ffffff"\n
font=“sans serif”\n
" > ~/.streamlit/config.toml

3 Likes

This workaround for displaying a background image doesn’t seem to work anymore with this new version, does anyone know how to bring it back?

page_bg_img = '''
    <style>
    body {
    background-image: url("https://sjc3.discourse-cdn.com/business7/plugins/discourse-narrative-bot/images/unicorn.png");
    background-size: cover;    
    }
    </style>
    '''

st.markdown(page_bg_img, unsafe_allow_html=True)

That’s a great addition. Great job.

Can you add a Meta description in the upcoming updates? So that people who google your streamlit app
see a little text box in the results?

st.set_page_config(
page_title=“My App”,
page_icon=":)",
→ meta_description = "This is my XY App that let’s you do … It uses machine learning to do … "
)

Currently there is no easy way to add the Meta text.

Keep up the great work.

1 Like

Team thanks for the update. how to deal with this when you are deploying into a docker container? especially with the new config.toml is there a standard way to build the Dockerfile?

I tried deploying my app but i get the error Assertion Error: theme.backgroundColor is not defined

it doesn’t work for me !? i really don’t know why ?

Hey @Amine_YK,

First, welcome to the Streamlit community! :partying_face: :partying_face: :tada: :tada: :raised_hands:

To troubleshoot can you check:

  • You have Streamlit --version 0.79 or higher?
  • That you have created a secret or hidden streamlit directory in the same folder your app is in .streamlit/
  • that your config file is named properly config.toml
  • that [theme] is the first entry in this file and is all lower case

If after checking this, everything is correct and your still having issues, I would recommend creating a new question. This should outline your issue and have a minimum working example of your code (or ideally a link to a GitHub repo)

You can check out the guidelines for asking questions that will help others help you here: Welcome ! Some suggestions for your first Streamlit question

Happy Streamlit-ing!
Marisa

Hi. Awesome feature! Thought I should let you know that the link above for your sample app doesn’t work for me. It gives the error “Whoops — something went wrong! An error has been logged.” Thanks.

1 Like