Streamlit-Theming: Wie man den Hintergrund und das Thema Ihrer App ändert
- Name
- Olaf Källström
Published on
Wenn Sie ein Datenenthusiast sind, haben Sie wahrscheinlich schon von Streamlit gehört. Es ist das Gesprächsthema in der Data-Science-Community - und das aus gutem Grund. Streamlit ist ein Game Changer, ein Werkzeug, das die Welt der Web-App-Entwicklung auf den Kopf gestellt hat. Aber wussten Sie, dass Streamlit nicht nur um Daten geht? Es geht auch um Ästhetik. Ja, Sie haben richtig gehört! Mit Streamlit können Sie das Aussehen und das Feeling Ihrer App individuell anpassen und sie genauso einzigartig machen wie eine Schneeflocke in einem Schneesturm. Also schnallen Sie sich an, während wir in die Welt des Streamlit-Theming eintauchen.
Streamlit-Theming: Kurz erklärt
Streamlit ist ein Juwel in der rauen Welt des Codierens. Es ist eine Open-Source-Python-Bibliothek, die die Mühsal der Web-App-Entwicklung beseitigt hat. Mit Streamlit können Sie interaktive datenzentrierte Web-Apps erstellen - und das schneller als Sie "Python" sagen können. Und das Beste daran? Sie müssen keine einzige Zeile HTML, CSS oder JavaScript kennen.
Was ist Streamlit?
Stellen Sie sich vor: Sie haben gerade ein Python-Skript geschrieben. Es ist wunderschön, ein Meisterwerk. Aber jetzt möchten Sie es mit der Welt teilen. Sie möchten daraus eine Web-App machen. Früher hätten Sie HTML, CSS und JavaScript lernen müssen. Aber mit Streamlit können Sie Ihr Skript in Minuten in eine Web-App umwandeln, und das alles in Python. Es ist wie Kuchen essen und ihn auch haben!
Streamlit-Theming: Ein neuer Weg, um Ihre Apps anzupassen
Aber Streamlit geht nicht nur um Geschwindigkeit und Effizienz. Es geht auch um Anpassungsfähigkeit. Mit Streamlit-Theming können Sie das Aussehen und das Feeling Ihrer App schneller ändern als ein Chamäleon seine Farben ändert. Möchten Sie die Hintergrundfarbe ändern? Ganz einfach. Möchten Sie die Schriftart ändern? Kein Problem. Mit Streamlit-Theming steht Ihnen die Welt offen.
Custom Themes, Dark Mode und Light Mode
Aber damit nicht genug. Streamlit-Theming ermöglicht es Ihnen auch, benutzerdefinierte Themes zu erstellen. Sie können ein Theme erstellen, das zu Ihrer Marke, Ihrem Stil oder sogar Ihrer Stimmung passt. Fühlen Sie sich dunkel und mysteriös? Probieren Sie den Dark Mode aus. Fühlen Sie sich leicht und luftig? Probieren Sie den Light Mode aus. Mit Streamlit sind Sie der Herrscher über Ihr Universum.
Möchten Sie kostenlos eine Data Analysis & Data Visualization App in Streamlit erstellen?
PyGWalker (opens in a new tab) ist eine Python-Bibliothek, mit der Sie mühelos eine Tableau-ähnliche Benutzeroberfläche in Ihre eigene Streamlit-App einbetten können. Schauen Sie sich dieses erstaunliche Video von Sven von Coding is Fun (opens in a new tab) an, in dem die detaillierten Schritte zur Stärkung Ihrer Streamlit-App mit dieser leistungsstarken Data Visualization Python Library gezeigt werden!
Besonderer Dank an Sven und seinen großartigen Beitrag (opens in a new tab) zur PyGWalker-Community!
Zusätzlich können Sie auch die PyGWalker GitHub-Seite (opens in a new tab) für weitere PyGWalker-Beispiele besuchen.
Anpassung Ihrer Streamlit-App: Von der Hintergrundfarbe bis zu den Schriftarten
Jetzt gehen wir ins Detail. Wie können Sie Ihre Streamlit-App anpassen? Nun, es ist so einfach wie Kuchen backen.
Ändern der Hintergrundfarbe
Um die Hintergrundfarbe Ihrer Streamlit-App zu ändern, müssen Sie nur ein paar Zeilen Code hinzufügen. Hier ein Beispiel:
[theme]
backgroundColor = "#F0F0F0"Dieser Code ändert die Hintergrundfarbe in ein helles Grau. Sie können "#F0F0F0" durch jede beliebige Farbe ersetzen, die Sie möchten. Die Möglichkeiten sind grenzenlos!
Anpassen von Schriftarten in Streamlit
Schriftarten sind die Lebensader Ihrer App. Sie können Ihre App professionell, spaßig oder sogar skurril aussehen lassen. Um die Schriftarten in Ihrer Streamlit-App anzupassen, können Sie den folgenden Code verwenden:
[theme]
font = "Helvetica Neue"Dieser Code ändert die Schriftart in "Helvetica Neue". Sie können "Helvetica Neue" durch jede beliebige Schriftart ersetzen, die Sie mögen. Denken Sie daran, dass die Schriftart eine Google Font sein muss.
Konfigurationsoptionen und Verwendung über die Befehlszeile
Streamlit bietet auch verschiedene Konfigurationsoptionen an. Mit diesen Optionen können Sie verschiedene Aspekte Ihrer App steuern, vom Theme bis zum Layout. Sie können auf diese Optionen über die Befehlszeile zugreifen. Um das Theme festzulegen, können Sie den folgenden Befehl verwenden:
streamlit config set [theme]Erweiterte Streamlit-Anpassung: Hintergrundbild und CSS
Wenn Sie abenteuerlustig sind, können Sie Ihre Streamlit-Anpassung auf die nächste Stufe heben. Sie können ein Hintergrundbild hinzufügen oder eine CSS-Datei für weitere UI-Anpassungen verwenden. Sehen wir uns an, wie das geht.
Hinzufügen eines Hintergrundbilds
Um Ihrem Streamlit-App ein Hintergrundbild hinzuzufügen, können Sie den folgenden Code verwenden:
st.markdown(
"""
<style>
.reportview-container {
background: url("https://www.example.com/image.jpg");
}
</style>
""",
unsafe_allow_html=True
)Dieser Code fügt Ihrer App ein Hintergrundbild hinzu. Sie können "https://www.example.com/image.jpg (opens in a new tab)" durch die URL Ihres Bildes ersetzen.
Verwendung einer CSS-Datei
Wenn Sie es richtig machen möchten, können Sie für weitere Anpassungen eine CSS-Datei verwenden. Sie können das Layout ändern, Animationen hinzufügen und vieles mehr. Hier ist, wie Sie es tun können:
st.markdown(
"""
<link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
""",
unsafe_allow_html=True
)Dieser Code verlinkt eine CSS-Datei mit Ihrer App. Sie können "https://www.example.com/style.css (opens in a new tab)" durch die URL Ihrer CSS-Datei ersetzen.
Streamlit-Theming: Ein tiefer Einblick
Jetzt, da wir die Grundlagen abgedeckt haben, tauchen wir tiefer in die Welt des Streamlit-Themens ein. Wir werden alles von Primärfarben bis hin zu regulären Konfigurationsoptionen erkunden und sogar erfahren, wie man einen kleinen zusätzlichen Kontrast hinzufügen kann, um eine optisch ansprechendere App zu erstellen.
Primärfarbe, sekundäre Hintergrundfarbe und Textfarbe
In Streamlit haben Sie die Möglichkeit, die Primärfarbe, die sekundäre Hintergrundfarbe und die Textfarbe Ihrer App zu ändern. Dies ermöglicht es Ihnen, ein Farbschema zu erstellen, das perfekt zu Ihrer Marke oder Ihrem persönlichen Stil passt. Wenn Sie zum Beispiel die Primärfarbe auf Blau, die sekundäre Hintergrundfarbe auf Weiß und die Textfarbe auf Schwarz setzen möchten, können Sie den folgenden Code verwenden:
[theme]
primaryColor = "#0000FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"Seitenelemente und hinzugefügter Kontrast
Streamlit ermöglicht es Ihnen auch, verschiedene Seitenelemente wie die Seitenleiste, Karten und Schaltflächen anzupassen. Sie können sogar Kontrast zu diesen Elementen hinzufügen, um eine optisch ansprechendere App zu erstellen. Wenn Sie zum Beispiel Kontrast zu Ihrer Seitenleiste hinzufügen möchten, können Sie den folgenden Code verwenden:
[theme]
sidebar = { "backgroundColor": "#FFFFFF", "contrast": 1.2 }Reguläre Konfigurationsoptionen
Neben dem Theming bietet Streamlit auch reguläre Konfigurationsoptionen an. Mit diesen Optionen können Sie verschiedene Aspekte Ihrer App steuern, wie den Serverport, den Browser und den Freigabemodus. Sie können auf diese Optionen über die Datei .streamlit/config.toml oder über die Befehlszeile zugreifen.
Haben Sie von diesem fantastischen Datenanalyse- und Datenvisualisierungstool gehört, mit dem Sie Ihre Streamlit-App in Tableau verwandeln können?
PyGWalker (opens in a new tab) ist eine Python-Bibliothek, die Ihnen dabei hilft, eine Tableau-ähnliche Benutzeroberfläche problemlos in Ihre eigene Streamlit-App zu integrieren.
Fazit
Streamlit-Theming ist ein leistungsstarkes Feature, das es Ihnen ermöglicht, das Aussehen und das Gefühl Ihrer Streamlit-Apps anzupassen. Mit Theming können Sie die Hintergrundfarbe ändern, ein Hintergrundbild hinzufügen, Schriftarten anpassen und vieles mehr. Ob erfahrener Entwickler oder Anfänger, Streamlit-Theming bietet eine Vielzahl von Möglichkeiten. Also los geht's, probieren Sie es aus. Entfesseln Sie Ihre Kreativität und gestalten Sie Ihre Streamlit-App ganz nach Ihren Vorstellungen.
FAQ
Streamlit ist ein leistungsstarkes Tool, kann aber für Anfänger auch etwas überwältigend sein. Deshalb haben wir eine Liste häufig gestellter Fragen zusammengestellt, um Ihnen den Einstieg zu erleichtern.
Wie stellt man ein Streamlit-Thema ein?
Das Einrichten eines Streamlit-Themas ist kinderleicht. Alles was Sie tun müssen, ist einen [theme]-Abschnitt zur Datei .streamlit/config.toml hinzufügen und Ihre gewünschten Farben, Schriftarten und andere Optionen festlegen.
Was ist das Standardthema in Streamlit?
Das Standardthema in Streamlit ist ein helles Thema mit weißem Hintergrund und schwarzem Text. Sie können dies jedoch ganz einfach in ein dunkles Thema oder ein benutzerdefiniertes Thema ändern, indem Sie den [theme]-Abschnitt in Ihrer Datei .streamlit/config.toml verwenden.
Welche Nachteile hat Streamlit?
Obwohl Streamlit ein leistungsstarkes Tool ist, hat es auch seine Nachteile. Zum einen ist es nicht so flexibel wie traditionelle Webentwicklungsframeworks. Es unterstützt auch keine Multi-Page-Apps von Haus aus, obwohl es dafür Workarounds gibt. Zuletzt, obwohl Streamlit großartig ist, um einfache, interaktive Web-Apps zu erstellen, ist es möglicherweise nicht die beste Wahl für komplexere Projekte.
Was ist Streamlit und wofür wird es verwendet?
Streamlit ist eine Open-Source-Python-Bibliothek, mit der Sie interaktive, datenzentrierte Web-Apps schnell und einfach erstellen können. Es wird von Data Scientists und Entwicklern genutzt, um ihre Arbeit zu teilen, Daten zu visualisieren und interaktive Tools zu erstellen, ohne HTML, CSS oder JavaScript lernen zu müssen.