tessl/pypi-dash-bootstrap-components

Bootstrap themed components for use in Plotly Dash applications

—

Pending

Overview

Eval results

Files

Themes and Icons

Name: tessl/pypi-dash-bootstrap-components
Author: tessl

Pre-configured CSS themes and icon libraries for consistent application styling and visual elements.

Capabilities

Theme System

The themes module provides pre-configured CSS theme URLs for easy integration with Dash applications. All themes are based on Bootstrap 5.3.6 and are served from CDNs for reliable access.

# Bootstrap base themes
themes.BOOTSTRAP: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
themes.GRID: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap-grid.min.css"

Bootswatch Themes

26 pre-styled themes from Bootswatch, all based on Bootstrap 5.3.6:

# Bootswatch themes (all return CDN URLs)
themes.CERULEAN: str    # Light blue theme with clean, professional appearance
themes.COSMO: str       # Clean, modern theme with subtle gradients  
themes.CYBORG: str      # Dark futuristic theme with neon highlights
themes.DARKLY: str      # Dark theme with high contrast
themes.FLATLY: str      # Flat design theme with bold colors
themes.JOURNAL: str     # Newspaper-inspired theme with serif fonts
themes.LITERA: str      # Literary theme with serif typography
themes.LUMEN: str       # Light theme with soft shadows
themes.LUX: str         # Luxurious theme with golden accents
themes.MATERIA: str     # Material Design inspired theme
themes.MINTY: str       # Fresh mint green theme
themes.MORPH: str       # Soft morphism design theme
themes.PULSE: str       # Vibrant theme with purple accents
themes.QUARTZ: str      # Stone-inspired neutral theme
themes.SANDSTONE: str   # Warm sandy theme with earth tones
themes.SIMPLEX: str     # Minimalist clean theme
themes.SKETCHY: str     # Hand-drawn sketchy appearance
themes.SLATE: str       # Professional dark slate theme
themes.SOLAR: str       # Solarized color scheme theme
themes.SPACELAB: str    # Space-inspired blue theme
themes.SUPERHERO: str   # Comic book superhero theme
themes.UNITED: str      # Professional corporate theme
themes.VAPOR: str       # Retro synthwave aesthetic
themes.YETI: str        # Clean Arctic-inspired theme
themes.ZEPHYR: str      # Breezy light theme with soft colors

Icon Libraries

Icon library CSS URLs for adding scalable vector icons to applications:

# Icon libraries
icons.BOOTSTRAP: str = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
icons.FONT_AWESOME: str = "https://use.fontawesome.com/releases/v6.7.2/css/all.css"

Usage Examples

Basic Theme Setup

import dash
import dash_bootstrap_components as dbc
from dash import html

# Using Bootstrap default theme
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Using a Bootswatch theme
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])

# Combining theme with icons
app = dash.Dash(__name__, external_stylesheets=[
    dbc.themes.BOOTSTRAP,
    dbc.icons.BOOTSTRAP,
])

app.layout = dbc.Container([
    html.H1("My Styled App"),
    dbc.Button("Primary Button", color="primary"),
])

if __name__ == "__main__":
    app.run_server(debug=True)

Theme Comparison Layout

# Layout showing different theme effects
theme_comparison = dbc.Container([
    html.H1("Theme Comparison", className="text-center mb-4"),
    
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Component Examples"),
                dbc.CardBody([
                    dbc.Alert("This is an alert", color="primary", className="mb-3"),
                    dbc.ButtonGroup([
                        dbc.Button("Primary", color="primary"),
                        dbc.Button("Secondary", color="secondary"),
                        dbc.Button("Success", color="success"),
                    ], className="mb-3"),
                    dbc.Progress(value=75, color="info", className="mb-3"),
                    dbc.Badge("Badge", color="warning", pill=True),
                ])
            ])
        ], width=6),
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Form Elements"),
                dbc.CardBody([
                    dbc.Input(placeholder="Text input", className="mb-2"),
                    dbc.Select(
                        options=[
                            {"label": "Option 1", "value": "1"},
                            {"label": "Option 2", "value": "2"},
                        ],
                        value="1",
                        className="mb-2"
                    ),
                    dbc.Checkbox(label="Checkbox", className="mb-2"),
                    dbc.Switch(label="Switch", value=True),
                ])
            ])
        ], width=6),
    ])
])

Dynamic Theme Switcher

from dash import callback, Input, Output

# Theme switcher component
theme_switcher = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Label("Select Theme:"),
            dbc.Select(
                id="theme-selector",
                options=[
                    {"label": "Bootstrap (Default)", "value": "BOOTSTRAP"},
                    {"label": "Cerulean", "value": "CERULEAN"},
                    {"label": "Cosmo", "value": "COSMO"},
                    {"label": "Cyborg", "value": "CYBORG"},
                    {"label": "Darkly", "value": "DARKLY"},
                    {"label": "Flatly", "value": "FLATLY"},
                    {"label": "Journal", "value": "JOURNAL"},
                    {"label": "Litera", "value": "LITERA"},
                    {"label": "Lumen", "value": "LUMEN"},
                    {"label": "Lux", "value": "LUX"},
                    {"label": "Materia", "value": "MATERIA"},
                    {"label": "Minty", "value": "MINTY"},
                    {"label": "Pulse", "value": "PULSE"},
                    {"label": "Sandstone", "value": "SANDSTONE"},
                    {"label": "Simplex", "value": "SIMPLEX"},
                    {"label": "Sketchy", "value": "SKETCHY"},
                    {"label": "Slate", "value": "SLATE"},
                    {"label": "Solar", "value": "SOLAR"},
                    {"label": "Spacelab", "value": "SPACELAB"},
                    {"label": "Superhero", "value": "SUPERHERO"},
                    {"label": "United", "value": "UNITED"},
                    {"label": "Yeti", "value": "YETI"},
                ],
                value="BOOTSTRAP",
            ),
        ], width=4),
        dbc.Col([
            html.Div(id="theme-preview"),
        ], width=8),
    ], className="mb-4"),
    
    # Sample components to show theme effects
    html.Div(id="themed-components"),
])

# Note: In a real app, dynamic theme switching requires more complex setup
# This is a conceptual example of the theme selection interface

Using Icons

# Bootstrap Icons examples
bootstrap_icons = html.Div([
    html.H3("Bootstrap Icons", className="mb-3"),
    html.P([
        html.I(className="bi bi-house-fill me-2"),
        "Home with house icon"
    ]),
    html.P([
        html.I(className="bi bi-envelope me-2"),
        "Email with envelope icon"
    ]),
    html.P([
        html.I(className="bi bi-telephone me-2"),
        "Phone with telephone icon"
    ]),
    dbc.Button([
        html.I(className="bi bi-download me-2"),
        "Download"
    ], color="primary", className="me-2"),
    dbc.Button([
        html.I(className="bi bi-share me-2"),
        "Share"
    ], color="success"),
])

# Font Awesome Icons examples  
fontawesome_icons = html.Div([
    html.H3("Font Awesome Icons", className="mb-3"),
    html.P([
        html.I(className="fas fa-user me-2"),
        "User profile"
    ]),
    html.P([
        html.I(className="fas fa-cog me-2"),
        "Settings"
    ]),
    html.P([
        html.I(className="fas fa-chart-bar me-2"),
        "Analytics"
    ]),
    dbc.Button([
        html.I(className="fas fa-save me-2"),
        "Save"
    ], color="primary", className="me-2"),
    dbc.Button([
        html.I(className="fas fa-trash me-2"),
        "Delete"
    ], color="danger"),
])

# Combined icons layout
icons_showcase = dbc.Container([
    dbc.Row([
        dbc.Col([bootstrap_icons], width=6),
        dbc.Col([fontawesome_icons], width=6),
    ])
])

Custom Theme Configuration

# App with custom external stylesheets and multiple themes
app = dash.Dash(
    __name__,
    external_stylesheets=[
        dbc.themes.BOOTSTRAP,  # Base Bootstrap theme
        dbc.icons.BOOTSTRAP,   # Bootstrap icons
        dbc.icons.FONT_AWESOME,  # Font Awesome icons
        # You can add custom CSS here
        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
    ],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ]
)

# Custom CSS can be added to assets/style.css or injected
custom_styles = {
    'fontFamily': 'Inter, sans-serif',
}

app.layout = dbc.Container([
    html.H1("Custom Themed App", style=custom_styles),
    dbc.Alert("Custom styling applied!", color="info"),
], style=custom_styles)

Dark Theme Implementation

# Dark theme setup with appropriate component styling
dark_theme_app = dash.Dash(__name__, external_stylesheets=[
    dbc.themes.CYBORG,  # Dark Bootswatch theme
    dbc.icons.BOOTSTRAP
])

dark_layout = dbc.Container([
    dbc.Navbar([
        dbc.NavbarBrand("Dark Theme App", className="text-light"),
        dbc.Nav([
            dbc.NavItem(dbc.NavLink("Home", href="#", className="text-light")),
            dbc.NavItem(dbc.NavLink("About", href="#", className="text-light")),
        ], navbar=True),
    ], color="dark", dark=True, className="mb-4"),
    
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Dark Theme Card"),
                dbc.CardBody([
                    html.P("This card adapts to the dark theme automatically."),
                    dbc.Button("Dark Button", color="primary"),
                ])
            ])
        ])
    ])
], fluid=True)

dark_theme_app.layout = dark_layout

Theme-Specific Component Styling

# Conditional styling based on theme choice
def create_themed_layout(theme_name):
    """Create layout optimized for specific theme."""
    
    # Theme-specific configurations
    theme_configs = {
        'DARKLY': {
            'card_color': 'dark',
            'text_color': 'light',
            'button_outline': True,
        },
        'BOOTSTRAP': {
            'card_color': 'light',
            'text_color': 'dark', 
            'button_outline': False,
        },
        'CYBORG': {
            'card_color': 'dark',
            'text_color': 'info',
            'button_outline': True,
        }
    }
    
    config = theme_configs.get(theme_name, theme_configs['BOOTSTRAP'])
    
    return dbc.Container([
        dbc.Card([
            dbc.CardHeader(f"Optimized for {theme_name}"),
            dbc.CardBody([
                html.P(
                    "This layout is optimized for the selected theme.",
                    className=f"text-{config['text_color']}"
                ),
                dbc.Button(
                    "Themed Button",
                    color="primary",
                    outline=config['button_outline']
                ),
            ])
        ], color=config['card_color'])
    ])

Grid-Only Theme

# Using Bootstrap grid without full Bootstrap styles
grid_only_app = dash.Dash(__name__, external_stylesheets=[
    dbc.themes.GRID,  # Only grid system, no component styles
    # Add your own custom component styles
])

grid_layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.Div("Column 1", className="p-3 border"),
        ], width=4),
        dbc.Col([
            html.Div("Column 2", className="p-3 border"),
        ], width=8),
    ]),
    dbc.Row([
        dbc.Col([
            html.Div("Full width column", className="p-3 border"),
        ], width=12),
    ], className="mt-3"),
])

grid_only_app.layout = grid_layout

Theme Characteristics

Light Themes

BOOTSTRAP: Default Bootstrap styling
CERULEAN: Professional blue theme
COSMO: Modern with subtle gradients
FLATLY: Bold flat design
JOURNAL: Newspaper-inspired serif fonts
LITERA: Literary serif typography
LUMEN: Soft shadows and light colors
MINTY: Fresh mint green
PULSE: Vibrant purple accents
SANDSTONE: Warm earth tones
SIMPLEX: Clean minimalist design
SPACELAB: Space-inspired blue
UNITED: Professional corporate
YETI: Arctic-inspired clean design
ZEPHYR: Soft breezy colors

Dark Themes

CYBORG: Futuristic with neon highlights
DARKLY: High contrast dark theme
SLATE: Professional dark slate
SOLAR: Solarized color scheme
SUPERHERO: Comic book inspired

Specialty Themes

LUX: Luxurious with golden accents
MATERIA: Material Design inspired
MORPH: Soft morphism design
QUARTZ: Stone-inspired neutrals
SKETCHY: Hand-drawn appearance
VAPOR: Retro synthwave aesthetic

Each theme provides consistent styling across all dash-bootstrap-components while maintaining unique visual characteristics.

Install with Tessl CLI

npx tessl i tessl/pypi-dash-bootstrap-components

docs