creating-streamlit-themes_skill

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