creating-streamlit-themes

Create cohesive Streamlit themes by editing config.toml [theme] sections.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/n-elia/barbarapp --skill creating-streamlit-themes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: creating-streamlit-themes
Source: https://github.com/n-elia/barbarapp/tree/main/.skills/developing-with-streamlit/skills/creating-streamlit-themes
Command: npx skills add https://github.com/n-elia/barbarapp --skill creating-streamlit-themes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly implement cohesive Streamlit themes that match brand guidelines, ensuring consistent visuals across dashboards and apps.

Core Features & Use Cases

  • Config.toml Theme: Define a centralized [theme] block and optional [theme.sidebar] to control colors, typography, borders, and radii for all Streamlit apps.
  • Branding & Accessibility: Create brand-aligned color palettes, typography, and contrast for accessible UI across light/dark modes.
  • Use Case: A team wants to deploy a branded analytics app and multiple internal tools with a single theme that updates across all pages.

Quick Start

Create a basic theme by editing the Streamlit config.toml: add a [theme] section with base, colors, font settings, and, optionally, [theme.sidebar].

Frequently Asked Questions about creating-streamlit-themes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom Streamlit theme for brand-aligned dashboards?

To create a custom Streamlit theme, edit the config.toml file by adding a [theme] section with your brand's base theme, color palette, font settings, and optionally a [theme.sidebar] block to standardize app appearance across multiple dashboards.

Can I configure separate dark mode and light mode color palettes in Streamlit?

Yes, you can configure light and dark mode color palettes in Streamlit by defining the primary, background, and secondary background colors along with text colors within the config.toml [theme] section to ensure accessible contrast across both modes.

How do I set custom typography and fonts for a Streamlit app?

You set custom typography for a Streamlit app by specifying the font, font family, and heading font family parameters inside the [theme] block of your config.toml file, overriding the default Streamlit fonts to match your branding.

What is the best way to standardize visual styling across multiple Streamlit apps?

The best way to standardize visual styling across multiple Streamlit apps is by centralizing your color palettes, typography, borders, and radii settings into a single config.toml [theme] definition that can be deployed consistently across all dashboards.

Does configuring a Streamlit theme require modifying the config.toml file?

Yes, configuring a Streamlit theme requires editing the config.toml file, where you define the [theme] section to apply base themes, colors, typography, and borders, ensuring a cohesive and brand-aligned user interface.

Why are my custom Streamlit theme colors not applying to the sidebar?

Your custom Streamlit theme colors may not apply to the sidebar because the optional [theme.sidebar] block is not defined in your config.toml, which is required to control specific sidebar background and border styling separately from the main app.