tessl/pypi-gradio

Python library for easily interacting with trained machine learning models

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Theme System

Name: tessl/pypi-gradio
Author: tessl

Comprehensive theming system with predefined themes and utilities for customizing visual appearance, branding, and user interface styling across all Gradio components.

Capabilities

Theme Classes

Built-in theme classes providing complete visual styling with customizable colors, fonts, spacing, and component appearance.

class Base:
    def __init__(
        self,
        primary_hue="blue",
        secondary_hue="gray", 
        neutral_hue="gray",
        spacing_size="lg",
        radius_size="lg",
        text_size="lg",
        font=None,
        font_mono=None,
        **kwargs
    ):
        """
        Base theme class with full customization options.

        Parameters:
        - primary_hue: Primary color hue (string color name or Color object)
        - secondary_hue: Secondary color hue
        - neutral_hue: Neutral color hue for backgrounds
        - spacing_size: Spacing scale ("sm", "md", "lg", "xl")
        - radius_size: Border radius scale ("sm", "md", "lg", "xl")
        - text_size: Text size scale ("sm", "md", "lg", "xl")
        - font: Primary font (Font object or font stack)
        - font_mono: Monospace font for code
        """

    def set(self, **kwargs):
        """Update theme properties."""

    def push_to_hub(self, repo_id, **kwargs):
        """Upload theme to Hugging Face Hub."""

# Alias for Base theme
Theme = Base

class Default(Base):
    def __init__(self, **kwargs):
        """Default Gradio theme with standard styling."""

class Glass(Base):
    def __init__(self, **kwargs):
        """Glass effect transparency theme with blur effects."""

class Monochrome(Base):
    def __init__(self, **kwargs):
        """Black and white minimalist theme."""

class Soft(Base):
    def __init__(self, **kwargs):
        """Soft color palette theme with muted tones."""

class Origin(Base):
    def __init__(self, **kwargs):
        """Original Gradio branding theme."""

class Citrus(Base):
    def __init__(self, **kwargs):
        """Citrus-inspired color theme with orange/yellow tones."""

class Ocean(Base):
    def __init__(self, **kwargs):
        """Ocean blue color theme with aquatic tones."""

Usage examples:

import gradio as gr

# Use predefined theme
demo = gr.Interface(
    fn=my_function,
    inputs="text",
    outputs="text",
    theme=gr.themes.Soft()
)

# Customize existing theme
custom_theme = gr.themes.Default(
    primary_hue="green",
    secondary_hue="blue",
    text_size="lg"
)

demo = gr.Blocks(theme=custom_theme)

Color System

Color definition and manipulation utilities for creating custom color schemes and palettes.

class Color:
    def __init__(
        self,
        c50="#fafafa",
        c100="#f4f4f5", 
        c200="#e4e4e7",
        c300="#d4d4d8",
        c400="#a1a1aa",
        c500="#71717a",
        c600="#52525b",
        c700="#3f3f46",
        c800="#27272a",
        c900="#18181b",
        c950="#09090b",
        name=None,
        **kwargs
    ):
        """
        Color definition with full shade palette.

        Parameters:
        - c50-c950: Color shades from lightest to darkest
        - name: Optional color name identifier
        """

    @classmethod
    def from_hex(cls, hex_color):
        """Create Color from single hex value, generating shade palette."""

    @classmethod  
    def from_name(cls, color_name):
        """Create Color from standard color name."""

    def to_dict(self):
        """Convert color to dictionary format."""

# Predefined color constants
colors = {
    "red": Color(...),
    "orange": Color(...),
    "amber": Color(...),
    "yellow": Color(...),
    "lime": Color(...),
    "green": Color(...),
    "emerald": Color(...),
    "teal": Color(...),
    "cyan": Color(...),
    "sky": Color(...),
    "blue": Color(...),
    "indigo": Color(...),
    "violet": Color(...),
    "purple": Color(...),
    "fuchsia": Color(...),
    "pink": Color(...),
    "rose": Color(...),
    "slate": Color(...),
    "gray": Color(...),
    "zinc": Color(...),
    "neutral": Color(...),
    "stone": Color(...),
}

Usage examples:

import gradio as gr

# Use predefined colors
theme = gr.themes.Base(
    primary_hue=gr.themes.colors.green,
    secondary_hue=gr.themes.colors.blue
)

# Create custom color
custom_color = gr.themes.Color.from_hex("#ff6b6b")
theme = gr.themes.Base(primary_hue=custom_color)

# Define full color palette
brand_color = gr.themes.Color(
    c50="#fff1f2",
    c100="#ffe4e6", 
    c500="#ef4444",
    c900="#7f1d1d",
    name="brand"
)

Font System

Font configuration and loading utilities for typography customization with support for web fonts and font stacks.

class Font:
    def __init__(
        self,
        name,
        weights=None,
        **kwargs
    ):
        """
        Font configuration for theme typography.

        Parameters:
        - name: Font name or font stack
        - weights: List of font weights to load
        """

    def to_css(self):
        """Generate CSS font-family declaration."""

class GoogleFont(Font):
    def __init__(
        self,
        name,
        weights=None,
        **kwargs
    ):
        """
        Google Fonts integration for web font loading.

        Parameters:
        - name: Google Font name
        - weights: List of weights to load (e.g., [400, 700])
        """

    def load_css(self):
        """Generate Google Fonts CSS import URL."""

# Font utilities and presets
def font_families():
    """Get available system font families."""

def web_safe_fonts():
    """Get web-safe font stack options."""

Usage examples:

import gradio as gr

# Use Google Fonts
heading_font = gr.themes.GoogleFont("Roboto", weights=[400, 700])
mono_font = gr.themes.GoogleFont("Roboto Mono")

theme = gr.themes.Base(
    font=heading_font,
    font_mono=mono_font
)

# Use system fonts
system_font = gr.themes.Font(
    "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
)

theme = gr.themes.Base(font=system_font)

Size System

Size definition utilities for consistent spacing, text scaling, and component dimensions across the interface.

class Size:
    def __init__(
        self,
        xxs=None,
        xs=None,
        sm=None,
        md=None,
        lg=None,
        xl=None,
        xxl=None,
        **kwargs
    ):
        """
        Size scale definition for spacing and dimensions.

        Parameters:
        - xxs through xxl: Size values for each scale step
        """

    def to_dict(self):
        """Convert size scale to dictionary."""

# Predefined size constants
sizes = {
    "text_xxs": "9px",
    "text_xs": "10px", 
    "text_sm": "12px",
    "text_md": "14px",
    "text_lg": "16px",
    "text_xl": "20px",
    "text_xxl": "24px",
    
    "spacing_xxs": "1px",
    "spacing_xs": "2px",
    "spacing_sm": "4px", 
    "spacing_md": "6px",
    "spacing_lg": "8px",
    "spacing_xl": "10px",
    "spacing_xxl": "16px",
    
    "radius_xxs": "1px",
    "radius_xs": "2px",
    "radius_sm": "4px",
    "radius_md": "6px", 
    "radius_lg": "8px",
    "radius_xl": "12px",
    "radius_xxl": "16px",
}

Usage examples:

import gradio as gr

# Use predefined size scales
theme = gr.themes.Base(
    spacing_size="xl",    # Larger spacing
    radius_size="sm",     # Smaller border radius
    text_size="lg"        # Larger text
)

# Custom size configuration
custom_spacing = gr.themes.Size(
    xs="2px",
    sm="6px", 
    md="12px",
    lg="20px",
    xl="32px"
)

Theme Customization Patterns

Complete Theme Customization

Creating fully customized themes with colors, fonts, and spacing:

import gradio as gr

# Define custom brand colors
brand_primary = gr.themes.Color(
    c50="#f0f9ff",
    c100="#e0f2fe",
    c200="#bae6fd", 
    c300="#7dd3fc",
    c400="#38bdf8",
    c500="#0ea5e9",  # Main brand color
    c600="#0284c7",
    c700="#0369a1",
    c800="#075985",
    c900="#0c4a6e",
    name="brand-blue"
)

# Load custom fonts
brand_font = gr.themes.GoogleFont("Inter", weights=[400, 500, 600, 700])
code_font = gr.themes.GoogleFont("JetBrains Mono", weights=[400, 500])

# Create comprehensive theme
brand_theme = gr.themes.Base(
    # Colors
    primary_hue=brand_primary,
    secondary_hue=gr.themes.colors.slate,
    neutral_hue=gr.themes.colors.gray,
    
    # Typography
    font=brand_font,
    font_mono=code_font,
    text_size="md",
    
    # Spacing and layout
    spacing_size="lg",
    radius_size="md"
)

# Apply to interface
with gr.Blocks(theme=brand_theme) as demo:
    gr.Markdown("# Custom Branded Interface")
    gr.Textbox(label="Input")
    gr.Button("Submit", variant="primary")

Theme Inheritance and Modification

Extending existing themes with custom modifications:

import gradio as gr

# Start with base theme and customize
corporate_theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="gray"
).set(
    # Override specific properties
    button_primary_background_fill="#2563eb",
    button_primary_background_fill_hover="#1d4ed8",
    block_background_fill="#f8fafc"
)

# Fine-tune component styles
corporate_theme.set(
    # Input components
    input_background_fill="white",
    input_border_color="#d1d5db",
    input_border_width="1px",
    
    # Layout
    panel_background_fill="white",
    panel_border_color="#e5e7eb",
    panel_border_width="1px"
)

Dark Theme Creation

Creating dark mode themes with appropriate contrast and accessibility:

import gradio as gr

dark_theme = gr.themes.Base(
    primary_hue=gr.themes.colors.blue,
    secondary_hue=gr.themes.colors.slate,
    neutral_hue=gr.themes.colors.slate
).set(
    # Dark backgrounds
    background_fill_primary="#0f172a",
    background_fill_secondary="#1e293b",
    
    # Dark panels
    panel_background_fill="#1e293b",
    panel_border_color="#334155",
    
    # Input styling
    input_background_fill="#334155",
    input_background_fill_focus="#475569",
    input_border_color="#64748b",
    
    # Text colors
    body_text_color="#f1f5f9",
    body_text_color_subdued="#cbd5e1",
    
    # Button styling
    button_secondary_background_fill="#475569",
    button_secondary_background_fill_hover="#64748b"
)

Component-Specific Styling

Targeting specific component types for detailed customization:

import gradio as gr

component_theme = gr.themes.Default().set(
    # Textbox styling
    input_background_fill="#ffffff",
    input_border_color="#d1d5db", 
    input_border_color_focus="#3b82f6",
    input_border_width="2px",
    input_border_radius="8px",
    
    # Button styling
    button_primary_background_fill="#3b82f6",
    button_primary_background_fill_hover="#2563eb",
    button_primary_text_color="white",
    button_border_radius="6px",
    
    # Gallery styling
    gallery_border_color="#e5e7eb",
    gallery_border_radius="8px",
    
    # Panel styling
    panel_background_fill="#f9fafb",
    panel_border_color="#e5e7eb",
    panel_border_radius="12px"
)

Theme Distribution and Sharing

Uploading Themes to Hugging Face Hub

Share custom themes with the community through Hugging Face Hub:

import gradio as gr

# Create custom theme
my_theme = gr.themes.Base(
    primary_hue="green",
    secondary_hue="blue"
)

# Upload to Hub
my_theme.push_to_hub(
    repo_id="username/my-gradio-theme",
    commit_message="Add custom green theme"
)

Loading Themes from Hub

Use community themes in your interfaces:

import gradio as gr

# Load theme from Hub
community_theme = gr.themes.from_hub("username/awesome-theme")

# Use in interface
demo = gr.Interface(
    fn=my_function,
    inputs="text", 
    outputs="text",
    theme=community_theme
)

Theme CSS Export

Export themes as CSS for use in custom applications:

# Export theme CSS
css_output = my_theme.to_css()

# Save to file
with open("custom-theme.css", "w") as f:
    f.write(css_output)

# Use CSS in Blocks
with gr.Blocks(css="custom-theme.css") as demo:
    # Interface components
    pass

Advanced Theming

CSS Variable Access

Access and modify CSS variables directly for fine-grained control:

advanced_theme = gr.themes.Base().set(
    # Typography variables
    "--text-lg": "18px",
    "--font-weight-bold": "600",
    
    # Color variables
    "--primary-50": "#eff6ff",
    "--primary-500": "#3b82f6",
    "--primary-900": "#1e3a8a",
    
    # Spacing variables
    "--spacing-lg": "12px",
    "--radius-md": "8px",
    
    # Component-specific variables
    "--button-shadow": "0 1px 3px rgba(0,0,0,0.1)",
    "--input-shadow-focus": "0 0 0 3px rgba(59,130,246,0.1)"
)

Responsive Theme Adjustments

Themes that adapt to different screen sizes and devices:

responsive_theme = gr.themes.Base(
    text_size="md"  # Base text size
).set(
    # Mobile adjustments
    "--text-sm-mobile": "14px",
    "--spacing-lg-mobile": "6px",
    
    # Tablet adjustments  
    "--text-md-tablet": "16px",
    "--spacing-lg-tablet": "10px",
    
    # Desktop optimizations
    "--text-lg-desktop": "18px",
    "--spacing-xl-desktop": "16px"
)

Theme Performance Optimization

Optimize themes for better performance and loading:

# Minimize CSS output
optimized_theme = gr.themes.Base(
    # Use fewer color variations
    primary_hue="blue",
    secondary_hue="blue",  # Reuse primary
    neutral_hue="gray"
).set(
    # Disable expensive effects
    "--shadow-drop": "none",
    "--backdrop-blur": "none",
    
    # Optimize animations
    "--transition-duration": "0.1s"
)

Install with Tessl CLI