Streamlit Theming: How to Change Your App's Background and Theme
- Name
- Olaf Källström
Updated on
If you're a data enthusiast, you've likely heard of Streamlit. It's the talk of the town in the data science community, and for good reason. Streamlit is a game-changer, a tool that's turned the world of web app development on its head. But did you know that Streamlit isn't just about data? It's also about aesthetics. Yes, you heard it right! With Streamlit, you can customize your app's look and feel, making it as unique as a snowflake in a blizzard. So, buckle up as we take a deep dive into the world of Streamlit theming.
Streamlit Theming: Quickly Explained
Streamlit is a gem in the rough world of coding. It's an open-source Python library that's taken the drudgery out of web app development. With Streamlit, you can create interactive, data-centric web apps faster than you can say "Python". And the best part? You don't need to know a single line of HTML, CSS, or JavaScript.
What is Streamlit?
Picture this: You've just written a Python script. It's a thing of beauty, a masterpiece. But now, you want to share it with the world. You want to turn it into a web app. In the past, you'd have to learn HTML, CSS, and JavaScript. But with Streamlit, you can turn your script into a web app in minutes, all in Python. It's like having your cake and eating it too!
Streamlit Theming: A New Way to Customize Your Apps
But Streamlit isn't just about speed and efficiency. It's also about customization. With Streamlit theming, you can change the look and feel of your app faster than a chameleon changes its colors. Want to change the background color? Easy peasy. Want to change the font type? No problemo. With Streamlit theming, the world is your oyster.
Custom Themes, Dark Mode, and Light Mode
And it doesn't stop there. Streamlit theming also allows you to create custom themes. You can create a theme that matches your brand, your style, or even your mood. Feeling dark and mysterious? Try the dark mode. Feeling light and breezy? Try the light mode. With Streamlit, you're the master of your universe.
Want to Create a Data Analysis & Data Visualization App within Streamlit for free?
PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a tableau-alternative UI into your own Streamlit app effortlessly. Check out this amazing video how to explore data with pygwalker (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!
Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!
Additionally, you can also check out PyGWalker GitHub Page (opens in a new tab) for more PyGWalker examples.
Customizing Streamlit App: From Background Color to Fonts
Now, let's get down to the nitty-gritty. How do you customize your Streamlit app? Well, it's as easy as pie.
Changing the Background Color
To change the background color of your Streamlit app, all you need to do is add a few lines of code. Here's an example:
[theme]
backgroundColor = "#F0F0F0"This code changes the background color to a light gray. You can replace "#F0F0F0" with any color you want. The sky's the limit!
Customizing Fonts in Streamlit
Fonts are the lifeblood of your app. They can make your app look professional, fun, or even quirky. To customize the fonts in your Streamlit app, you can use the following code:
[theme]
font = "Helvetica Neue"This code changes the font to "Helvetica Neue". You can replace "Helvetica Neue" with any font you like. Just remember, the font must be a Google Font.
Config Options and Command Line Usage
Streamlit also offers a variety of config options. These options allow you to control various aspects of your app, from the theme to the layout. You can access these options through the command line. For example, to set the theme, you can use the following command:
streamlit config set [theme]Advanced Streamlit Customization: Background Image and CSS
If you're feeling adventurous, you can take your Streamlit customization to the next level. You can add a background image or use a CSS file for further UI customization. Let's see how.
Adding a Background Image
To add a background image to your Streamlit app, you can use the following code:
st.markdown(
"""
<style>
.reportview-container {
background: url("https://www.example.com/image.jpg");
}
</style>
""",
unsafe_allow_html=True
)This code adds a background image to your app. You can replace "https://www.example.com/image.jpg (opens in a new tab)" with the URL of your image.
Using a CSS File
If you want to go all out, you can use a CSS file for further customization. You can change the layout, add animations, and much more. Here's how you can do it:
st.markdown(
"""
<link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
""",
unsafe_allow_html=True
)This code links a CSS file to your app. You can replace "https://www.example.com/style.css (opens in a new tab)" with the URL of your CSS file.
Streamlit Theming: A Deep Dive
Now that we've covered the basics, let's delve deeper into the world of Streamlit theming. We'll explore everything from primary colors to regular config options, and even how to add a little extra contrast for a more visually appealing app.
Primary Color, Secondary Background Color, and Text Color
In Streamlit, you have the power to change the primary color, secondary background color, and text color of your app. This allows you to create a color scheme that perfectly matches your brand or personal style. For instance, if you want to set the primary color to blue, the secondary background color to white, and the text color to black, you can use the following code:
[theme]
primaryColor = "#0000FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"Page Elements and Added Contrast
Streamlit also allows you to customize various page elements, such as the sidebar, cards, and buttons. You can even add contrast to these elements for a more visually appealing app. For example, if you want to add contrast to your sidebar, you can use the following code:
[theme]
sidebar = { "backgroundColor": "#FFFFFF", "contrast": 1.2 }Regular Config Options
In addition to theming, Streamlit also offers regular config options. These options allow you to control various aspects of your app, such as the server port, the browser, and the sharing mode. You can access these options through the .streamlit/config.toml file or the command line.
Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?
PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a tableau-alternative UI into your own Streamlit app effortlessly.
Conclusion
Streamlit theming is a powerful feature that allows you to customize the look and feel of your Streamlit apps. With theming, you can change the background color, add a background image, customize fonts, and much more. Whether you're a seasoned developer or a beginner, Streamlit theming offers a world of possibilities. So go ahead, give it a try. Unleash your creativity and make your Streamlit app truly yours.
FAQ
Streamlit is a powerful tool, but it can also be a bit overwhelming for beginners. That's why we've compiled a list of frequently asked questions to help you get started.
How do you set a Streamlit theme?
Setting a Streamlit theme is as easy as pie. All you need to do is add a [theme] section to your .streamlit/config.toml file and specify your desired colors, fonts, and other options.
What is the default theme in Streamlit?
The default theme in Streamlit is a light theme with a white background and black text. However, you can easily change this to a dark theme or a custom theme using the [theme] section in your .streamlit/config.toml file.
What are the disadvantages of Streamlit?
While Streamlit is a powerful tool, it's not without its drawbacks. For one, it's not as flexible as traditional web development frameworks. It also doesn't support multi-page apps out of the box, although there are workarounds for this. Lastly, while Streamlit is great for creating simple, interactive web apps, it might not be the best choice for more complex projects.
What is Streamlit and why is it used?
Streamlit is an open-source Python library that allows you to create interactive, data-centric web apps quickly and easily. It's used by data scientists and developers to share their work, visualize data, and build interactive tools without having to learn front-end languages like HTML, CSS, or JavaScript.