Stylisme Streamlit : comment changer le fond et le thème de votre application
- Name
- Olaf Källström
Published on
Si vous êtes un passionné de données, vous avez certainement entendu parler de Streamlit. C'est le sujet de conversation dans la communauté de la science des données, et ce n'est pas sans raison. Streamlit est une véritable révolution, un outil qui a bouleversé le monde du développement d'applications web. Mais saviez-vous que Streamlit ne se limite pas aux données ? Il s'agit également d'esthétique. Oui, vous avez bien entendu ! Avec Streamlit, vous pouvez personnaliser l'apparence de votre application, en la rendant aussi unique qu'un flocon de neige dans une tempête de neige. Alors, attachez votre ceinture, car nous plongeons dans l'univers du stylisme Streamlit.
Stylisme Streamlit : explication rapide
Streamlit est une perle rare dans le monde désordonné de la programmation. Il s'agit d'une bibliothèque Python open-source qui a rendu le développement d'applications web interactives centrées sur les données plus rapide que de dire "Python". Et le meilleur dans tout ça ? Vous n'avez pas besoin de connaître une seule ligne de HTML, CSS ou JavaScript.
Qu'est-ce que Streamlit ?
Imaginez ceci : vous venez d'écrire un script Python. C'est un véritable chef-d'œuvre. Mais maintenant, vous voulez le partager avec le monde entier. Vous voulez en faire une application web. Auparavant, vous auriez dû apprendre HTML, CSS et JavaScript. Mais avec Streamlit, vous pouvez transformer votre script en une application web en quelques minutes, tout en utilisant Python. C'est comme avoir le beurre et l'argent du beurre !
Stylisme Streamlit : une nouvelle façon de personnaliser vos applications
Mais Streamlit ne se limite pas à la rapidité et à l'efficacité. Il s'agit également de personnalisation. Avec le stylisme Streamlit, vous pouvez changer l'apparence de votre application plus rapidement qu'un caméléon change de couleur. Vous voulez changer la couleur de fond ? Facile comme bonjour. Vous voulez changer le type de police ? Aucun problème. Avec le stylisme Streamlit, le monde est à votre portée.
Thèmes personnalisés, mode sombre et mode clair
Et cela ne s'arrête pas là. Le stylisme Streamlit vous permet également de créer des thèmes personnalisés. Vous pouvez créer un thème qui correspond à votre marque, à votre style, voire à votre humeur. Vous vous sentez sombre et mystérieux ? Essayez le mode sombre. Vous vous sentez léger et enjoué ? Essayez le mode clair. Avec Streamlit, vous êtes le maître de votre univers.
Vous voulez créer gratuitement une application d'analyse et de visualisation de données dans Streamlit ?
PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit. Regardez cette formidable vidéo réalisée par Sven de Coding is Fun (opens in a new tab) qui détaille les étapes pour renforcer votre application Streamlit avec cette puissante bibliothèque de visualisation de données en Python !
Un grand merci à Sven et sa formidable contribution (opens in a new tab) à la communauté PyGWalker !
De plus, vous pouvez également consulter la page GitHub de PyGWalker (opens in a new tab) pour plus d'exemples de PyGWalker.
Personnalisation de l'application Streamlit : de la couleur de fond aux polices
Maintenant, entrons dans le vif du sujet. Comment personnaliser votre application Streamlit ? C'est facile comme bonjour.
Changer la couleur de fond
Pour changer la couleur de fond de votre application Streamlit, il vous suffit d'ajouter quelques lignes de code. Voici un exemple :
[theme]
backgroundColor = "#F0F0F0"Ce code change la couleur de fond en un gris clair. Vous pouvez remplacer "#F0F0F0" par n'importe quelle couleur de votre choix. Tout est possible !
Personnalisation des polices dans Streamlit
Les polices sont l'âme de votre application. Elles peuvent lui donner un aspect professionnel, amusant ou même excentrique. Pour personnaliser les polices de votre application Streamlit, vous pouvez utiliser le code suivant :
[theme]
font = "Helvetica Neue"Ce code change la police en "Helvetica Neue". Vous pouvez remplacer "Helvetica Neue" par n'importe quelle police que vous aimez. N'oubliez pas que la police doit être une police Google.
Options de configuration et utilisation en ligne de commande
Streamlit propose également une variété d'options de configuration. Ces options vous permettent de contrôler divers aspects de votre application, du thème à la disposition. Vous pouvez accéder à ces options via la ligne de commande. Par exemple, pour définir le thème, vous pouvez utiliser la commande suivante :
streamlit config set [theme]Personnalisation avancée de Streamlit : image de fond et CSS
Si vous êtes d'humeur aventureuse, vous pouvez pousser la personnalisation de Streamlit encore plus loin. Vous pouvez ajouter une image de fond ou utiliser un fichier CSS pour une personnalisation plus poussée de l'interface utilisateur. Voyons comment faire.
Ajouter une image de fond
Pour ajouter une image de fond à votre application Streamlit, vous pouvez utiliser le code suivant :
st.markdown(
"""
<style>
.reportview-container {
background: url("https://www.example.com/image.jpg");
}
</style>
""",
unsafe_allow_html=True
)Ce code ajoute une image de fond à votre application. Vous pouvez remplacer "https://www.example.com/image.jpg (opens in a new tab)" par l'URL de votre image.
Utiliser un fichier CSS
Si vous voulez aller encore plus loin, vous pouvez utiliser un fichier CSS pour une personnalisation plus poussée. Vous pourrez modifier la mise en page, ajouter des animations et bien plus encore. Voici comment procéder :
st.markdown(
"""
<link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
""",
unsafe_allow_html=True
)Ce code lie un fichier CSS à votre application. Vous pouvez remplacer "https://www.example.com/style.css (opens in a new tab)" par l'URL de votre fichier CSS.
Stylisme Streamlit : une plongée profonde
Maintenant que nous avons couvert les bases, plongeons plus en profondeur dans le monde du thème Streamlit. Nous explorerons tout, des couleurs primaires aux options de configuration régulières, et même comment ajouter un peu plus de contraste pour une application plus attrayante visuellement.
Couleur principale, couleur de fond secondaire et couleur de texte
Dans Streamlit, vous avez le pouvoir de changer la couleur principale, la couleur de fond secondaire et la couleur du texte de votre application. Cela vous permet de créer un schéma de couleurs qui correspond parfaitement à votre marque ou à votre style personnel. Par exemple, si vous souhaitez définir la couleur principale en bleu, la couleur de fond secondaire en blanc et la couleur du texte en noir, vous pouvez utiliser le code suivant :
[thème]
couleurPrincipale = "#0000FF"
couleurDeFond = "#FFFFFF"
couleurDeFondSecondaire = "#F0F0F0"
couleurDuTexte = "#000000"Éléments de page et contraste ajouté
Streamlit vous permet également de personnaliser divers éléments de page, tels que la barre latérale, les cartes et les boutons. Vous pouvez même ajouter du contraste à ces éléments pour une application plus attrayante visuellement. Par exemple, si vous souhaitez ajouter du contraste à votre barre latérale, vous pouvez utiliser le code suivant :
[thème]
barreLatérale = { "couleurDeFond": "#FFFFFF", "contraste": 1.2 }Options de configuration régulières
En plus du thème, Streamlit propose également des options de configuration régulières. Ces options vous permettent de contrôler divers aspects de votre application, tels que le port du serveur, le navigateur et le mode de partage. Vous pouvez accéder à ces options via le fichier .streamlit/config.toml ou en ligne de commande.
Avez-vous entendu parler de cet outil impressionnant d'analyse de données et de visualisation des données qui transforme votre application Streamlit en Tableau ?
PyGWalker (opens in a new tab) est une bibliothèque Python qui vous aide à intégrer facilement une interface utilisateur similaire à Tableau dans votre propre application Streamlit sans effort.
Conclusion
Le thème Streamlit est une fonctionnalité puissante qui vous permet de personnaliser l'apparence et le style de vos applications Streamlit. Avec le thème, vous pouvez changer la couleur de fond, ajouter une image de fond, personnaliser les polices, et bien plus encore. Que vous soyez un développeur expérimenté ou un débutant, le thème Streamlit offre un monde de possibilités. Alors n'hésitez pas, essayez-le. Libérez votre créativité et faites de votre application Streamlit la vôtre.
FAQ
Streamlit est un outil puissant, mais il peut aussi être un peu intimidant pour les débutants. C'est pourquoi nous avons compilé une liste de questions fréquemment posées pour vous aider à démarrer.
Comment définir un thème Streamlit ?
Définir un thème Streamlit est un jeu d'enfant. Il vous suffit d'ajouter une section [thème] à votre fichier .streamlit/config.toml et de spécifier vos couleurs, polices et autres options souhaitées.
Quel est le thème par défaut dans Streamlit ?
Le thème par défaut dans Streamlit est un thème clair avec un fond blanc et du texte noir. Cependant, vous pouvez facilement le changer en un thème sombre ou un thème personnalisé en utilisant la section [thème] dans votre fichier .streamlit/config.toml.
Quels sont les inconvénients de Streamlit ?
Bien que Streamlit soit un outil puissant, il présente également des inconvénients. Tout d'abord, il n'est pas aussi flexible que les frameworks de développement web traditionnels. Il ne prend pas en charge les applications multipages par défaut, bien qu'il existe des solutions de contournement à cela. Enfin, bien que Streamlit soit idéal pour créer des applications web simples et interactives, il pourrait ne pas être le meilleur choix pour des projets plus complexes.
Qu'est-ce que Streamlit et pourquoi est-il utilisé ?
Streamlit est une bibliothèque Python open-source qui vous permet de créer rapidement et facilement des applications web interactives centrées sur les données. Il est utilisé par les scientifiques des données et les développeurs pour partager leur travail, visualiser les données et construire des outils interactifs sans avoir à apprendre les langages front-end tels que HTML, CSS ou JavaScript.