Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Theming de Streamlit: Cómo cambiar el fondo y el tema de tu aplicación

Olaf Källström
Name
Olaf Källström

Updated on

Si eres un entusiasta de los datos, es probable que hayas oído hablar de Streamlit. Es el tema de conversación en la comunidad de ciencia de datos, y por una buena razón. Streamlit es revolucionario, una herramienta que ha cambiado por completo el mundo del desarrollo de aplicaciones web. Pero ¿sabías que Streamlit no se trata solo de datos? También se trata de estética. ¡Sí, lo escuchaste bien! Con Streamlit, puedes personalizar el aspecto de tu aplicación, haciéndola tan única como un copo de nieve en una tormenta de nieve. Así que prepárate mientras exploramos el mundo del theming de Streamlit.

Theming de Streamlit: Explicación rápida

Streamlit es una joya en el áspero mundo de la codificación. Es una biblioteca de Python de código abierto que ha eliminado las tareas tediosas del desarrollo de aplicaciones web. Con Streamlit, puedes crear aplicaciones web interactivas y centradas en los datos más rápido de lo que puedes decir "Python". ¿Y lo mejor de todo? No necesitas saber ni una sola línea de HTML, CSS o JavaScript.

¿Qué es Streamlit?

Imagínate esto: acaba de escribir un script en Python. Es una obra de arte, una obra maestra. Pero ahora quieres compartirlo con el mundo. Quieres convertirlo en una aplicación web. En el pasado, tendrías que aprender HTML, CSS y JavaScript. Pero con Streamlit, puedes convertir tu script en una aplicación web en minutos, todo en Python. ¡Es como tener tu pastel y comértelo también!

Theming de Streamlit: Una nueva forma de personalizar tus aplicaciones

Pero Streamlit no se trata solo de velocidad y eficiencia. También se trata de personalización. Con el theming de Streamlit, puedes cambiar el aspecto de tu aplicación más rápido que un camaleón cambia de color. ¿Quieres cambiar el color de fondo? Muy fácil. ¿Quieres cambiar el tipo de letra? Sin problema. Con el theming de Streamlit, el mundo es tuyo.

Temas personalizados, modo oscuro y modo claro

Y no termina ahí. El theming de Streamlit también te permite crear temas personalizados. Puedes crear un tema que se ajuste a tu marca, a tu estilo o incluso a tu estado de ánimo. ¿Te sientes oscuro y misterioso? Prueba el modo oscuro. ¿Te sientes ligero y despreocupado? Prueba el modo claro. Con Streamlit, eres el amo de tu universo.

¿Quieres crear una aplicación de análisis y visualización de datos dentro de Streamlit de forma gratuita?

PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incrustrar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo. Echa un vistazo a este increíble video producido por Cómo explorar datos con PyGWalker en Python (opens in a new tab) que muestra los pasos detallados para potenciar tu aplicación de Streamlit con esta poderosa Biblioteca de visualización de datos en Python!


Agradecimientos especiales a Sven y su gran contribución (opens in a new tab) a la comunidad de PyGWalker.

Además, también puedes visitar la página de GitHub de PyGWalker (opens in a new tab) para obtener más ejemplos de PyGWalker.

Personalización de la aplicación de Streamlit: Desde el color de fondo hasta las fuentes

Ahora, vamos a entrar en detalles. ¿Cómo personalizar tu aplicación de Streamlit? Bueno, es tan fácil como un pastel.

Cambiar el color de fondo

Para cambiar el color de fondo de tu aplicación de Streamlit, todo lo que necesitas hacer es agregar algunas líneas de código. Aquí tienes un ejemplo:

[theme]
backgroundColor = "#F0F0F0"

Este código cambia el color de fondo a un gris claro. Puedes reemplazar "#F0F0F0" con el color que desees. ¡El cielo es el límite!

Personalización de fuentes en Streamlit

Las fuentes son el alma de tu aplicación. Pueden hacer que tu aplicación se vea profesional, divertida o incluso extravagante. Para personalizar las fuentes de tu aplicación de Streamlit, puedes usar el siguiente código:

[theme]
font = "Helvetica Neue"

Este código cambia la fuente a "Helvetica Neue". Puedes reemplazar "Helvetica Neue" con cualquier fuente que te guste. Solo recuerda, la fuente debe ser una fuente de Google.

Opciones de configuración y uso de la línea de comandos

Streamlit también ofrece una variedad de opciones de configuración. Estas opciones te permiten controlar varios aspectos de tu aplicación, desde el tema hasta el diseño. Puedes acceder a estas opciones a través de la línea de comandos. Por ejemplo, para establecer el tema, puedes usar el siguiente comando:

streamlit config set [theme]

Personalización avanzada de Streamlit: Imagen de fondo y CSS

Si estás sintiendo aventurero/a, puedes llevar la personalización de Streamlit al siguiente nivel. Puedes agregar una imagen de fondo o utilizar un archivo CSS para una personalización de UI aún más completa. Veamos cómo.

Agregar una imagen de fondo

Para agregar una imagen de fondo a tu aplicación de Streamlit, puedes usar el siguiente código:

st.markdown(
    """
    <style>
    .reportview-container {
        background: url("https://www.example.com/image.jpg");
    }
   </style>
    """,
    unsafe_allow_html=True
)

Este código agrega una imagen de fondo a tu aplicación. Puedes reemplazar "https://www.example.com/image.jpg (opens in a new tab)" con la URL de tu imagen.

Usar un archivo CSS

Si quieres ir más allá, puedes usar un archivo CSS para una personalización adicional. Puedes cambiar el diseño, agregar animaciones y mucho más. Aquí te mostramos cómo hacerlo:

st.markdown(
    """
    <link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
    """,
    unsafe_allow_html=True
)

Este código vincula un archivo CSS a tu aplicación. Puedes reemplazar "https://www.example.com/style.css (opens in a new tab)" con la URL de tu archivo CSS.

Deep Dive en el theming de Streamlit

Ahora que hemos cubierto los conceptos básicos, adentrémonos más en el mundo de la personalización de Streamlit. Exploraremos todo, desde los colores primarios hasta las opciones de configuración regular e incluso cómo agregar un poco más de contraste para una aplicación más atractiva visualmente.

Color primario, color secundario de fondo y color de texto

En Streamlit, tienes la capacidad de cambiar el color primario, el color secundario de fondo y el color de texto de tu aplicación. Esto te permite crear un esquema de color que se ajuste perfectamente a tu marca o estilo personal. Por ejemplo, si quieres establecer el color primario en azul, el color secundario de fondo en blanco y el color de texto en negro, puedes usar el siguiente código:

[theme]
primaryColor = "#0000FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"

Elementos de página y contraste añadido

Streamlit también te permite personalizar varios elementos de la página, como la barra lateral, las tarjetas y los botones. Incluso puedes agregar contraste a estos elementos para una aplicación más atractiva visualmente. Por ejemplo, si quieres agregar contraste a tu barra lateral, puedes usar el siguiente código:

[theme]
sidebar = { "backgroundColor": "#FFFFFF", "contrast": 1.2 }

Opciones de configuración regular

Además de la personalización, Streamlit también ofrece opciones de configuración regular. Estas opciones te permiten controlar diversos aspectos de tu aplicación, como el puerto del servidor, el navegador y el modo de compartir. Puedes acceder a estas opciones a través del archivo .streamlit/config.toml o la línea de comandos.

¿Has oído hablar de esta increíble herramienta de análisis de datos y visualización de datos que convierte tu aplicación de Streamlit en Tableau?

PyGWalker (opens in a new tab) es una biblioteca de Python que te ayuda a incorporar fácilmente una interfaz similar a Tableau en tu propia aplicación de Streamlit sin esfuerzo.

PyGWalker para visualización de datos en Streamlit (opens in a new tab)

Conclusión

La personalización de Streamlit es una característica poderosa que te permite personalizar el aspecto y la apariencia de tus aplicaciones de Streamlit. Con la personalización, puedes cambiar el color de fondo, agregar una imagen de fondo, personalizar las fuentes y mucho más. Ya seas un desarrollador experimentado o un principiante, la personalización de Streamlit ofrece un mundo de posibilidades. Así que adelante, pruébalo. Libera tu creatividad y haz que tu aplicación de Streamlit sea verdaderamente tuya.

Preguntas frecuentes

Streamlit es una herramienta poderosa, pero también puede ser un poco abrumadora para los principiantes. Por eso hemos recopilado una lista de preguntas frecuentes para ayudarte a comenzar.

¿Cómo se establece un tema en Streamlit?

Establecer un tema en Streamlit es muy fácil. Todo lo que necesitas hacer es agregar una sección [theme] a tu archivo .streamlit/config.toml y especificar tus colores, fuentes y otras opciones deseadas.

¿Cuál es el tema predeterminado en Streamlit?

El tema predeterminado en Streamlit es un tema claro con un fondo blanco y texto negro. Sin embargo, puedes cambiar fácilmente esto a un tema oscuro o un tema personalizado utilizando la sección [theme] en tu archivo .streamlit/config.toml.

¿Cuáles son las desventajas de Streamlit?

Aunque Streamlit es una herramienta poderosa, no está exenta de desventajas. Por un lado, no es tan flexible como los frameworks tradicionales de desarrollo web. También no es compatible de manera nativa con aplicaciones de varias páginas, aunque existen soluciones alternativas para esto. Por último, aunque Streamlit es excelente para crear aplicaciones web simples e interactivas, es posible que no sea la mejor opción para proyectos más complejos.

¿Qué es Streamlit y por qué se utiliza?

Streamlit es una biblioteca de Python de código abierto que te permite crear aplicaciones web interactivas y centradas en datos de forma rápida y sencilla. Es utilizada por científicos de datos y desarrolladores para compartir su trabajo, visualizar datos y crear herramientas interactivas sin necesidad de aprender lenguajes de front-end como HTML, CSS o JavaScript.