st.balloons, st.snow, st.logo y personalización de temas en config.toml

st.balloons y st.snow: efectos de celebración

Streamlit incluye dos efectos visuales de celebración que se activan puntualmente para reforzar acciones exitosas:

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    if st.button("🎈 Celebrar con globos"):
        st.balloons()

with col2:
    if st.button("❄️ Celebrar con nieve"):
        st.snow()

Úsalos con moderación: son efectivos para confirmar el envío de un formulario importante, completar un entrenamiento o finalizar un proceso.

flowchart TD
    A[Personalizar app Streamlit] --> B[".streamlit/config.toml sección theme"]
    B --> C[primaryColor primaryBackgroundColor]
    B --> D[backgroundColor secondaryBackgroundColor]
    B --> E["textColor font sans serif|monospace"]
    A --> F[st.set_page_config en script]
    F --> G[page_title page_icon layout wide]
    F --> H[initial_sidebar_state expanded]
    A --> I[st.logo path imagen]
    I --> J[Aparece en cabecera y sidebar]
    A --> K[st.balloons st.snow] 
    K --> L[Efectos celebración puntuales]
    C --> M[Identidad visual coherente B2B]

import streamlit as st

st.title("Simulador de entrenamiento ML")

if st.button("Entrenar modelo", type="primary"):
    with st.spinner("Entrenando..."):
        import time
        time.sleep(2)

    st.success("Modelo entrenado con éxito. Accuracy: 94.3 %")
    st.balloons()  # Celebración al completar el entrenamiento

st.logo: logotipo corporativo

st.logo (Streamlit 1.36+) muestra un logotipo en la cabecera de la aplicación y, opcionalmente, una versión alternativa en la barra lateral:

import streamlit as st

# Logo básico desde URL
st.logo("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png")

# Logo con versión para la barra lateral (más pequeña o en negativo)
st.logo(
    image="assets/logo_empresa_light.png",   # Logo principal (cabecera)
    icon_image="assets/logo_empresa_icon.png"  # Ícono en la barra lateral (compacto)
)

Parámetros principales de st.logo:

| Parámetro | Descripción | |-----------|-------------| | image | Ruta local, URL o array NumPy del logo principal | | link | URL a la que redirige al hacer clic en el logo | | icon_image | Versión compacta del logo para la barra lateral | | size | "small", "medium" (por defecto) o "large" |

import streamlit as st

# Logo clicable que redirige a la web de la empresa
st.logo(
    image="assets/logo_certidevs.png",
    link="https://certidevs.com",
    icon_image="assets/icon_certidevs.png",
    size="medium"
)

st.title("Panel de analítica")

st.set_page_config: configuración global de la página

st.set_page_config debe ser la primera llamada a Streamlit en el script. Controla el título del navegador, el favicon, el layout y el estado inicial de la barra lateral:

import streamlit as st

st.set_page_config(
    page_title="Mi Dashboard",          # Título en la pestaña del navegador
    page_icon="📊",                     # Emoji o ruta a un .png/.ico
    layout="wide",                      # "centered" (por defecto) o "wide"
    initial_sidebar_state="expanded",   # "auto", "expanded" o "collapsed"
    menu_items={
        "Get Help": "https://docs.certidevs.com",
        "Report a Bug": "https://github.com/certidevs/issues",
        "About": "## CertiDevs Analytics v2.0"
    }
)

st.title("Bienvenido al dashboard")

Personalización del tema con config.toml

El archivo .streamlit/config.toml en la raíz del proyecto permite definir un tema persistente que se aplica a toda la aplicación:

# .streamlit/config.toml

[theme]
primaryColor = "#FF4B4B"          # Color de botones y elementos interactivos
backgroundColor = "#FFFFFF"       # Fondo de la página principal
secondaryBackgroundColor = "#F0F2F6"  # Fondo de la barra lateral y st.container
textColor = "#31333F"             # Color del texto principal
font = "sans serif"               # "sans serif" | "serif" | "monospace"

Tema oscuro personalizado

[theme]
primaryColor = "#00D4FF"
backgroundColor = "#0E1117"
secondaryBackgroundColor = "#1A1D27"
textColor = "#FAFAFA"
font = "monospace"

Tema corporativo

[theme]
primaryColor = "#1E4B9C"      # Azul corporativo
backgroundColor = "#FEFEFE"
secondaryBackgroundColor = "#EEF2FF"
textColor = "#1A1A2E"
font = "sans serif"

Ejemplos de paletas de colores

import streamlit as st

# Mostrar los colores del tema actual para documentación interna
st.title("Guía de estilo")

col1, col2, col3 = st.columns(3)

with col1:
    st.subheader("Color primario")
    st.markdown(
        "<div style='background:#FF4B4B; height:80px; border-radius:8px;'></div>",
        unsafe_allow_html=True
    )
    st.caption("#FF4B4B")

with col2:
    st.subheader("Fondo principal")
    st.markdown(
        "<div style='background:#FFFFFF; height:80px; border-radius:8px; border:1px solid #ddd;'></div>",
        unsafe_allow_html=True
    )
    st.caption("#FFFFFF")

with col3:
    st.subheader("Fondo secundario")
    st.markdown(
        "<div style='background:#F0F2F6; height:80px; border-radius:8px;'></div>",
        unsafe_allow_html=True
    )
    st.caption("#F0F2F6")

Aplicación completa con personalización

import streamlit as st
import time

# Configuración global de la página
st.set_page_config(
    page_title="CertiDevs Analytics",
    page_icon="🎓",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Logo corporativo
st.logo(
    "https://certidevs.com/logo.png",
    link="https://certidevs.com"
)

# Barra lateral con filtros
with st.sidebar:
    st.header("Filtros")
    año = st.selectbox("Año", [2024, 2025, 2026])
    categoria = st.multiselect("Categoría", ["Python", "Java", "Frontend"], default=["Python"])

# Contenido principal
st.title("📊 Dashboard de CertiDevs")
st.caption(f"Datos de {año} · {', '.join(categoria) if categoria else 'Todas las categorías'}")

col1, col2, col3, col4 = st.columns(4)
col1.metric("Usuarios activos", "12.450", "+8.2%")
col2.metric("Cursos completados", "3.892", "+15.4%")
col3.metric("Certificados emitidos", "1.204", "+22.1%")
col4.metric("Satisfacción media", "4.8 / 5", "+0.2")

st.divider()

if st.button("🎓 Emitir certificados del mes", type="primary"):
    with st.spinner("Procesando certificados..."):
        time.sleep(1.5)
    st.success("204 certificados emitidos correctamente.")
    st.balloons()

Selector de tema en tiempo real

import streamlit as st

st.title("Explorador de paletas de color")
st.info("Los cambios de color en config.toml requieren reiniciar la app. Este ejemplo muestra los valores con CSS inline.")

paletas = {
    "Streamlit (por defecto)": {"primary": "#FF4B4B", "bg": "#FFFFFF", "secondary_bg": "#F0F2F6", "text": "#31333F"},
    "Oscuro moderno": {"primary": "#00D4FF", "bg": "#0E1117", "secondary_bg": "#1A1D27", "text": "#FAFAFA"},
    "Corporativo azul": {"primary": "#1E4B9C", "bg": "#FEFEFE", "secondary_bg": "#EEF2FF", "text": "#1A1A2E"},
    "Verde naturaleza": {"primary": "#2ECC71", "bg": "#FAFFF8", "secondary_bg": "#E8F8E8", "text": "#1A3A1A"},
}

seleccionada = st.selectbox("Elige una paleta", list(paletas.keys()))
colores = paletas[seleccionada]

st.subheader(f"Paleta: {seleccionada}")

cols = st.columns(4)
nombres = ["primaryColor", "backgroundColor", "secondaryBackgroundColor", "textColor"]
for col, nombre, hex_color in zip(cols, nombres, colores.values()):
    with col:
        st.markdown(
            f"<div style='background:{hex_color}; height:60px; border-radius:6px; border:1px solid #ccc;'></div>",
            unsafe_allow_html=True
        )
        st.caption(f"`{nombre}`")
        st.code(hex_color)

st.subheader("config.toml equivalente")
toml_content = f"""[theme]
primaryColor = "{colores['primary']}"
backgroundColor = "{colores['bg']}"
secondaryBackgroundColor = "{colores['secondary_bg']}"
textColor = "{colores['text']}"
font = "sans serif"
"""
st.code(toml_content, language="toml")