skills.rest
andfanilo
andfaniloCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

creating-streamlit-themes

Create and customize Streamlit themes via configuration keys.

629|85|Updated May 4, 2020
Search Tags:#design#theming#accessibility#themes#fonts#streamlit#config.toml
One-click install
npx skills add https://github.com/andfanilo/streamlit-echarts --skill creating-streamlit-themes-andfanilo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: creating-streamlit-themes
Source: https://github.com/andfanilo/streamlit-echarts/tree/main/.claude/skills/developing-with-streamlit/skills/creating-streamlit-themes
Command: npx skills add https://github.com/andfanilo/streamlit-echarts --skill creating-streamlit-themes-andfanilo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlit apps often lack consistent, brand-aligned styling and accessible contrast out of the box; this Skill centralizes theme configuration so apps look cohesive, readable, and on-brand without fragile custom CSS hacks.

Core Features & Use Cases

  • Centralized Theme Configuration: Define primary, background, secondary, and text colors along with radii and borders in a single config file to ensure consistent UI across an app.
  • Typography and Font Hosting: Load Google Fonts or self-hosted font faces via static assets to control body, heading, and code typography.
  • Light/Dark Modes and Accessibility: Provide separate light and dark theme sections, tune contrast for WCAG compliance, and adjust chart palettes and dataframe styling for readability.
  • Use Case: Apply a company brand theme to multiple Streamlit dashboards so that buttons, charts, and data tables match a centralized design system.

Quick Start

Create or update the .streamlit/config.toml theme section with your primaryColor, backgroundColor, textColor, and optional font and chart colors, then save and reload the app to preview the theme.

Frequently Asked Questions about creating-streamlit-themes

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

FAQPage Schema
How do I customize Streamlit theme colors and fonts for brand alignment?▼

You customize Streamlit theme colors and fonts by editing the theme section in the .streamlit/config.toml file. Define primaryColor, backgroundColor, textColor, and font family keys, then save and reload the app to preview the centralized brand styling.

Can I use Google Fonts in my Streamlit app theme?▼

Yes, you can load Google Fonts or self-hosted font faces via static assets in your Streamlit app. This allows you to control body, heading, and code typography directly within your centralized theme configuration.

What is the best way to create light and dark modes in Streamlit?▼

The best way to create light and dark modes in Streamlit is by providing separate light and dark theme sections in the config.toml file, allowing you to tune contrast for WCAG compliance and adjust chart palettes for readability.

Does Streamlit theming support adjusting chart palettes and dataframe styling?▼

Yes, Streamlit theming supports adjusting chart palettes and dataframe styling. By configuring theme keys in the config.toml file, you ensure that data visualizations maintain readable and consistent colors across your application.

Why use config.toml for Streamlit theming instead of custom CSS hacks?▼

Using config.toml for Streamlit theming centralizes color, typography, and component appearance configuration, ensuring cohesive and accessible UI without fragile custom CSS hacks that break across app updates or multiple dashboards.

Related Skills

Explore More Design & Creative Skills→
DDTullyDDTully

creating-streamlit-themes

Generate and refine Streamlit theme configurations in config.toml.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
PaldomPaldom
1

displaying-streamlit-data

Display dataframes, tables, metrics, and charts in Streamlit apps.

Community
Intermediate
legoutlegout
3

creating-streamlit-themes

Configure Streamlit themes via native settings in config.toml.

Community
Intermediate