streamlit/agent-skills
Overview
This skill teaches how to create and customize Streamlit themes using .streamlit/config.toml to produce polished, brand-aligned apps. It covers color palettes, typography, chart and dataframe styling, sidebar variants, light/dark mode, and recommended design principles. Practical examples and common mistakes help you build accessible, maintainable themes without relying on brittle CSS.
How this skill works
You author theme settings inside the [theme] section of config.toml (or define [theme.light] and [theme.dark] variants). The theme controls primary colors, background layers, semantic status colors, chart palettes, fonts, radii, and sidebar appearance. The app reads these values at runtime; font file changes require a server restart and the st.context.theme.base value lets your code adapt to the active mode.
When to use it
- Align app appearance with brand guidelines
- Change colors, fonts, or component radii across an app
- Provide separate light and dark variants that users can switch between
- Standardize chart palettes and dataframe styling consistently
- Avoid ad-hoc CSS hacks that break with Streamlit updates
Best practices
- Set primaryColor dark enough for white button text to remain readable
- Ensure WCAG AA contrast for body and heading text against backgrounds
- Prefer base inheritance: start from a built-in theme and override only what changes
- Self-host custom fonts via static/ and declare [[theme.fontFaces]]; restart server after changes
- Define both [theme.light] and [theme.dark] to enable user mode switching; otherwise the app is locked
- Test buttons, forms, dataframes, charts, and sidebar in both modes before release
Example use cases
- Create a Snowflake-like brand theme with blue accents and white content background
- Build a developer VS Code dark theme with syntax-style chart palettes and compact radii
- Self-host a custom corporate font family for consistent headings and body text across apps
- Provide light/dark logo swapping in code using st.context.theme.base
- Define chartCategoricalColors and chartSequentialColors to ensure consistent visuals in Plotly/Altair charts
FAQ
No. Font files must be served by the app (for example placed under static/) and referenced via a URL accessible to Streamlit; then declare them with [[theme.fontFaces]].
Will theme changes update immediately?
Most config.toml theme changes apply live after saving and rerunning the app. Font face changes require restarting the Streamlit server.
9 skills
This skill helps you craft professional, brand-aligned Streamlit themes by configuring config.toml, typography, colors, and sidebar styles.
Using third-party Streamlit custom components. Use when extending Streamlit with community packages. Covers installation, popular custom components, and when to use them.
Building multi-page Streamlit apps. Use when creating apps with multiple pages, setting up navigation, or managing state across pages.
Choosing the right Streamlit selection widget. Use when deciding between radio buttons, selectbox, segmented control, pills, or other option selection widgets. Helps pick the right widget for the number of options and selection type.
Organizing Streamlit code for maintainability. Use when structuring apps with separate modules and utilities. Covers separation of concerns, keeping UI code clean, and import patterns.
Building dashboards in Streamlit. Use when creating KPI displays, metric cards, or data-heavy layouts. Covers borders, cards, responsive layouts, and dashboard composition.
Build production-grade Streamlit apps. Used when creating, editing, debugging, or deploying Streamlit applications. Routes to specialized sub-skills for performance, layouts, design, data display, and more.
Connecting Streamlit apps to Snowflake. Use when setting up database connections, managing secrets, or querying Snowflake from a Streamlit app.
Building chat interfaces in Streamlit. Use when creating conversational UIs, chatbots, or AI assistants. Covers st.chat_message, st.chat_input, message history, and streaming responses.
