サイトアイコン アマチュア無線局JS2IIU

Streamlit応用編 第5回: テーマのカスタマイズ

JS2IIU

はじめに

こんにちは、JS2IIUです。
第5回目の今回は、Streamlitアプリのテーマカスタマイズについて解説します。テーマを適用することで、アプリの見た目を自分好みに調整でき、ユーザーにより一貫性のあるビジュアル体験を提供できます。この記事では、config.tomlを使ったアプリ全体のテーマ設定方法と、ライトモードとダークモードの切り替え機能の実装方法について説明します。

Streamlitテーマの設定

Streamlitでは、config.tomlファイルを使ってアプリのテーマをカスタマイズできます。このファイルに設定を記述することで、アプリのデフォルトの配色やフォント、レイアウトスタイルを変更できます。

config.tomlを保存する場所

config.tomlファイルは、Streamlitを実行するディレクトリの中に.streamlitという名前でディレクトリを作成して、その中に保存します。私の環境では、こちらのようなディレクトリ構成にしています。pythonのコードはmainの中に入れてあります。Streamlitを走らせる時はstreamlit run main/####.pyというような感じになります。

.
├── .streamlit
│   └── config.toml
├── data
│   ├── processed_data.csv
│   ├── sample.csv
│   └── sample2.csv
├── main
│   ├── sl_base_ui.py
│   └── test.py
├── requirements.txt
└── venv
    以下略

config.toml の基本構成

以下は、基本的なconfig.tomlファイルの構成例です。

[theme]
primaryColor = "#4CAF50"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"
font = "sans serif"

この設定では、アプリのテーマに以下のカスタマイズを適用しています。

config.tomlで設定可能な項目については、Streamlitの本家ページを参照してください。

config.toml - Streamlit Docs
docs.streamlit.io

具体的な例

例えば、Streamlitアプリに以下のようなテーマを適用したい場合、config.tomlを次のように設定します。

[theme]
primaryColor = "#3498db"
backgroundColor = "#2c3e50"
secondaryBackgroundColor = "#34495e"
textColor = "#ecf0f1"
font = "monospace"

この設定により、アプリ全体がクールなブルーを基調としたモダンなテーマに変わります。

config.tomlを設定した場合

config.tomlを設定していないデフォルトの場合

ライトモードとダークモードの切り替え

最近のウェブアプリでは、ユーザーが好みに応じてライトモードとダークモードを切り替える機能が求められることが多くなっています。Streamlitでも、この機能を簡単に実装できます。

テーマ切り替えの基本設定

Streamlitは、ユーザーが手動でテーマを切り替えられるように設定することが可能です。次のコード例では、アプリのサイドバーにラジオボタンを配置して、テーマの切り替えを実現します。

import streamlit as st

# サイドバーにテーマの選択オプションを追加
theme = st.sidebar.radio(
    "テーマを選択してください",
    options=["ライトモード", "ダークモード"]
)

# 選択されたテーマに基づいてスタイルを適用
if theme == "ライトモード":
    st.markdown(
        """
        <style>
        body {
            background-color: #FFFFFF;
            color: #000000;
        }
        </style>
        """,
        unsafe_allow_html=True
    )
else:
    st.markdown(
        """
        <style>
        body {
            background-color: #2c3e50;
            color: #ecf0f1;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

このコードでは、ユーザーが選択したテーマに基づいて、st.markdownを使ってCSSを動的に適用しています。unsafe_allow_html=Trueを指定することで、HTMLとCSSを直接埋め込むことができます。

まとめ

第5回目では、Streamlitのテーマカスタマイズについて学びました。config.tomlを使ってアプリのビジュアルを調整し、ライトモードとダークモードの切り替えを実装する方法を紹介しました。これにより、ユーザーに対して一貫したブランドイメージを提供し、ユーザーエクスペリエンスを向上させることができます。

次回は、Streamlitアプリのデプロイと共有方法について解説します。Streamlit Cloudへのデプロイ、ローカルホスト以外へのデプロイ、カスタムドメインの設定について学びますので、お楽しみに！

最後まで読んでいただきありがとうございました。73

補足：Streamlit応用編　記事リスト

Streamlit応用編 第1回: キャッシュ機能の活用
https://js2iiu.com/2024/08/28/streamlit-01-cache/

Streamlit応用編 第2回: インタラクティブなウィジェットの応用
https://js2iiu.com/2024/08/29/streamlit-02-widget/

Streamlit応用編 第3回: データのアップロードとダウンロード
https://js2iiu.com/2024/08/29/streamlit-03-download/

Streamlit応用編 第4回: レイアウトのカスタマイズ
https://js2iiu.com/2024/08/30/streamlit-04-layout/

Streamlit応用編 第5回: テーマのカスタマイズ
https://js2iiu.com/2024/08/31/streamlit-05-theme-custom/

Streamlit応用編 第6回: デプロイと共有
https://js2iiu.com/2024/09/01/streamlit-06-deploy/

Streamlit応用編 第7回: 認証とセキュリティ
https://js2iiu.com/2024/09/02/streamlit-07-security/

Streamlit応用編 第8回: データベースとの連携
https://js2iiu.com/2024/09/02/streamlit-08-database/

Streamlit応用編 第9回: 複雑なデータビジュアライゼーション
https://js2iiu.com/2024/09/05/streamlit-09-visualization/

Streamlit応用編 第10回: マルチページアプリの作成
https://js2iiu.com/2024/09/06/streamlit-10-multipage/

Streamlit応用編 第11回: StreamlitでAPIを作成する方法
https://js2iiu.com/2024/09/07/streamlit-11-api/

モバイルバージョンを終了