In our previous article, we learned how to install Streamlit, create a ‘Hello World’ app, and also a few text elements and widgets. Next up, in this article, we are going to learn about theming in Streamlit.
Streamlit provides both light and dark modes. Streamlit firsts check the user’s preference for light or dark mode set by them in their operating system and browser. If so, that preference is used. Otherwise, the light theme is applied by default.
Also read: An Introduction to Streamlit
How to change the theme of a Streamlit app?
Let’s now look at the different methods you can use to change the default theme of Streamlit.
Method 1 for changing Streamlit app theme [GUI Method]
We can change the theme from the settings.
Click on “≣” symbol in your app, and then click on the ‘Settings’ option. The steps are shown in the figures below.
You will see the below screen now.
Now, in the Theme section, click on the dropdown menu. As we can see in the above image, the default theme is the one that was set by the user in their system settings. It is the dark theme in this case.
There are three options: Use system setting (which is the default one), Light and Dark. Or, if we want to make our own theme, we can use the ‘Edit active theme‘ button. Clicking on it will lead us to the below screen.
Here, we have all the options to change the different colors as well as the font family of the text. Once you have created a theme by yourself, it will be saved as a ‘Custom Theme’ in the theme selector and will be applied by default.
Method 2 for changing Streamlit app theme [Code Method]
We can also set the theme via the command line while starting the app using the streamlit run command. Also, we can define the theme inside the [theme] section in the .streamlit/config.toml file. It can be found at
C:\Users\userName\.streamlit\config.toml
on a Windows machine, and at
~/.streamlit/config.toml
on a Mac OS/Linux machine.
The default light theme inside the .streamlit/config.toml file will look like this:
[theme]
primaryColor="#F63366"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#262730"
font="sans serif"
And the dark theme will be like this:
[theme]
primaryColor="#FF4B4B"
backgroundColor="#0E1117"
secondaryBackgroundColor="#262730"
textColor="#FAFAFA"
font="sans serif"
Let us explore all of these options one by one. But before this, let us quickly develop an app with the things that we learnt in the previous introductory tutorial about Streamlit.
import streamlit as st
# button
st.button('Streamlit Button', help="Click here")
# check box
st.checkbox('Check Box')
# radio button
lang = st.radio(
"What's your favorite programming language?",
('C++', 'Python'))
if lang == 'C++':
st.write('You selected C++.')
else:
st.write('You selected Python')
# slider
score = st.slider('Please specify your test score', 0, 100, 10)
st.write("My test score is ", score)
# Using object notation
add_selectbox = st.sidebar.radio(
"Please choose an option",
("Option 1", "Option 2", "Option 3")
)
Output:
The above is a simple Streamlit app consisting of different widgets like a check box, button, sidebar, slider, and radio button. We will be using this app and trying out different theme options in it for the examples below.
NOTE: All the color options support HEX, RGB, and HSL formats as well as web-browser-supported color names like “green”, and “blue”. We will be using browser-supported color names for the examples below.
primaryColor – Changing the primary color of Streamlit apps
primaryColor means the accent color in Streamlit apps. The widgets like slider, button, and checkbox (when focused) use primaryColor.
config.toml:
[theme]
primaryColor="green"
backgroundColor="#0E1117"
secondaryBackgroundColor="#262730"
textColor="#FAFAFA"
font="sans serif"
Output:
In the above image, all the widgets that are in focus have green as their primary color instead of the default red color, as it was specified in the config file.
backgroundColor – Changing the background color of Streamlit apps
It refers to the background color of the main content area of the app.
config.toml:
[theme]
primaryColor="#FF4B4B"
backgroundColor="pink"
secondaryBackgroundColor="#262730"
textColor="#FAFAFA"
font="sans serif"
Output:
The background of the main content area is now pink in color.
secondaryBackgroundColor – Adding a secondary background color
This option is used when a second background color is desired. Plotly chart and sidebar in Streamlit mostly use this option.
config.toml:
[theme]
primaryColor="#FF4B4B"
backgroundColor="#0E1117"
secondaryBackgroundColor="blue"
textColor="#FAFAFA"
font="sans serif"
Output:
The widgets which use secondaryBackgroundColor, like the sidebar, in this case, has turned blue here. Notice that the background color of the main content area has not changed.
textColor – Setting the text color of Streamlit apps
It is used to change the color of the text in our Streamlit app.
config.toml:
[theme]
primaryColor="#FF4B4B"
backgroundColor="#0E1117"
secondaryBackgroundColor="#262730"
textColor="red"
font="sans serif"
Output:
The text color here is red as specified in the config file.
font – Changing the font of Streamlit apps
Streamlit supports three font types, namely, sans serif, serif and monospace. The default font is sans serif.
In code blocks, the font type is always monospace irrespective of the font type selected here.
config.toml:
[theme]
primaryColor=”#FF4B4B”
backgroundColor=”#0E1117″
secondaryBackgroundColor=”#262730″
textColor=”#FAFAFA”
font=”monospace”
Output:
In this case, the font family has changed to monospace.
Conclusion
So this was the second one in the Streamlit tutorial series where we learned about theming in Streamlit. Hope you found it helpful. Do check out our other tutorials in this series as well.