theme-factory_skill

Overview

This skill provides a professional theming system for building cohesive visual identities across applications. It includes theme generators, design token management, and Streamlit integration to apply consistent styles automatically. The goal is fast, accessible, and brand-consistent UI theming for production apps.

How this skill works

Define theme specifications as design tokens (colors, typography, spacing, radii, shadows, animations) and generate full palettes and variants. A ThemeFactory produces preset and custom themes, while utilities manipulate colors and ensure contrast. Streamlit integration injects CSS or applies theme settings early in app initialization so components render with the selected theme.

When to use it

• Implementing brand-consistent visual identities across web apps
• Adding multi-theme support or a light/dark mode toggle
• Creating design token systems for component libraries
• Building industry-tailored themes (real estate, finance, healthcare)
• Standardizing typography, spacing, and color scales for teams

Best practices

• Always consume design tokens (CSS variables) instead of hardcoded values
• Test themes in both light and dark modes and verify WCAG AA contrast
• Start with presets, then refine colors and typography to match brand guidelines
• Keep CSS injection early in app startup to avoid render flashes
• Reuse tokens and minimize custom overrides to preserve performance

Example use cases

• Rapidly creating a professional real-estate theme with primary, secondary, and accent palettes
• Generating a luxury theme with premium accents and serif headings for high-end platforms
• Adding a theme selector in a Streamlit app so users can switch between corporate and dark modes
• Using design tokens from the active theme to style custom components and charts consistently
• Exporting and reusing themes across multiple projects for enterprise brand consistency