Customizing Streamlit app themes. Use when changing app colors or appearance. Covers config.toml theming, avoiding CSS, and targeted styling when necessary.
Custom colors and styling. Stick to config.toml—avoid CSS.
Configure your app's colors in .streamlit/config.toml:
[theme]
base = "light" # or "dark"
primaryColor = "#FF4B4B"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
textColor = "#262730"
font = "sans serif"
Core options:
base → Start from "light" or "dark" themeprimaryColor → Interactive elements (buttons, links, sliders)backgroundColor → Main content areasecondaryBackgroundColor → Sidebar and widget backgroundstextColor → All textfont → "sans serif", "serif", or "monospace"Define both themes and let users choose:
[theme.light]
primaryColor = "#FF4B4B"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
textColor = "#262730"
[theme.dark]
primaryColor = "#FF6B6B"
backgroundColor = "#0E1117"
secondaryBackgroundColor = "#262730"
textColor = "#FAFAFA"
When both are defined, users can switch between them in the settings menu.
Style the sidebar separately:
[theme]
base = "light"
primaryColor = "slateBlue"
backgroundColor = "mintCream"
[theme.sidebar]
backgroundColor = "aliceBlue"
secondaryBackgroundColor = "skyBlue"
if st.context.theme.base == "dark":
# Dark mode specific logic
chart_color = "#FF6B6B"