# Creating Streamlit Themes

Creating and customizing Streamlit themes.

- Repository: https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop (521 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-06-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -g -a claude-code -y`
Codex: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -g -a codex -y`
Cursor: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -g -a cursor -y`
Gemini CLI: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill creating-streamlit-themes -g -a gemini-cli -y`

## Description

Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Creating Streamlit themes

Build professional, brand-aligned themes using `.streamlit/config.toml`. This skill covers design principles and complete configuration for polished, cohesive themes.

## Theme file setup

Theme options go in Streamlit's `config.toml` under the `[theme]` section:

## Theme inheritance

Start from a built-in theme or external file:

```toml
[theme]
base = "light"                         # or "dark"
# base = "./my-base-theme.toml"        # Local file
# base = "https://example.com/theme.toml"  # Remote URL
```

When using `base`, you only need to override the values you want to change. Theme files referenced via `base` can only contain a single `[theme]` section, `[theme.light]` and `[theme.dark]` variants are not supported in external theme files.

## Color configuration

### Theme colors

```toml
[theme]
primaryColor = "#0969da"           # Buttons, links, active elements
backgroundColor = "#ffffff"        # Main content background
secondaryBackgroundColor = "#f6f8fa"  # Widget backgrounds, code blocks
textColor = "#1F2328"              # Body text

# Optional refinements
linkColor = "#0969da"              # Markdown links (defaults to primaryColor)
codeTextColor = "#1F2328"          # Inline code text
codeBackgroundColor = "#f6f8fa"    # Code block background
borderColor = "#d0d7de"            # Widget borders
```

**Design principle:** Choose a `primaryColor` dark enough to contrast with white text. Streamlit renders the text of primary buttons white against the primary color.

### Color palette

Define semantic colors for status indicators, markdown text coloring, and sparklines:

```toml
[theme]
redColor = "#cf222e"
orangeColor = "#bf8700"
yellowColor = "#dbab09"
greenColor = "#1a7f37"
blueColor = "#0969da"
violetColor = "#8250df"
grayColor = "#57606a"
```

Each color supports background and text variants (auto-derived if not set):

The rest: https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/blob/HEAD/.agents/skills/developing-with-streamlit/skills/creating-streamlit-themes/SKILL.md