こんにちは、JS2IIUです。
Streamlitは、Pythonだけで簡単にWebアプリが作れる便利なフレームワークです。しかし、デフォルトの見た目のままだと、少し味気なかったり、アプリの用途やブランドイメージに合わなかったりすることもあります。
そこで今回は、Streamlitの「テーマ」設定を使って、アプリの色やフォントを自由にカスタマイズする方法を紹介します。
1. Streamlitのテーマとは？
Streamlitのテーマ機能を使うと、次のようなアプリの見た目をカスタマイズできます：
- アプリの背景色やテキストの色
- ボタンや選択肢の強調色（アクセントカラー）
- フォントの種類
- ダークモード／ライトモードの切り替え
🌟 こんなときに便利！
- 自社のブランドカラーでアプリを作りたい
- ユーザーにやさしい配色を使いたい
- 見やすさを重視した配色にしたい
テーマ設定は「config.toml」という設定ファイルを使っておこないます。
2. テーマ設定ファイル config.toml の場所と作成方法
テーマの設定は、通常 ~/.streamlit/config.toml というファイルに記述します。
🔍 デフォルトの保存場所：
| OS | ファイルのパス |
|---|---|
| Windows | C:\Users\あなたのユーザー名\.streamlit\config.toml |
| macOS/Linux | /Users/あなたのユーザー名/.streamlit/config.toml |
📁 手順（ステップバイステップ）：
- ターミナル（またはコマンドプロンプト）を開く
.streamlitフォルダがなければ作成するbash mkdir ~/.streamlitconfig.tomlファイルを作成するbash nano ~/.streamlit/config.toml
3. config.toml の基本的な記述例と解説
以下は、カスタムテーマの一例です：
[theme]
base="dark"
primaryColor="#F39C12"
backgroundColor="#1E1E1E"
secondaryBackgroundColor="#2E2E2E"
textColor="#FFFFFF"
font="sans serif"🧩 各項目の意味：
| 項目 | 説明 |
|---|---|
base | ベーステーマ（"light" または "dark"） |
primaryColor | 強調色（ボタンやチェックボックスなど） |
backgroundColor | アプリ全体の背景色 |
secondaryBackgroundColor | サイドバーなどの背景色 |
textColor | テキストの色 |
font | フォントスタイル（"sans serif"、"serif"、"monospace"） |
デフォルト：
上記のconfig.tomlを適用した場合：
4. ホームディレクトリ以外に config.toml を置く方法（応用編）
通常はホームディレクトリに置く必要がありますが、環境変数 STREAMLIT_CONFIG を使うことで、任意の場所にある config.toml を読み込ませることが可能です。
✅ 設定方法（例）：
export STREAMLIT_CONFIG=/path/to/custom_config.tomlWindowsの場合（PowerShell）：
$env:STREAMLIT_CONFIG="C:\path\to\custom_config.toml"📌 注意点：
- この環境変数はStreamlitの実行中に有効です。
- 複数のプロジェクトで異なるテーマ設定を使いたいときに便利です。
5. テーマをアプリに反映させる方法
テーマを変更した後は、アプリを再起動するだけでOKです。
streamlit run app.pyもし設定が反映されない場合は、ブラウザのキャッシュをクリアしてみてください。
6. st.set_page_config()との違い・併用について
st.set_page_config() は、アプリごとにタイトルやアイコン、レイアウトの幅などを指定できる関数です。
st.set_page_config – Streamlit Docs
例えば次のように記述します：
import streamlit as st
st.set_page_config(
page_title="カスタムテーマのサンプル",
layout="wide",
initial_sidebar_state="expanded"
)これはテーマとは別の機能ですが、併用することで、より統一感のあるアプリになります。
7. デプロイやチーム開発時の注意点
✅ ローカルではOK、でもデプロイでは…？
- Streamlit Cloudなどにデプロイする場合、ローカルの
config.tomlは反映されません。 - 対処法として、CSS を
st.markdown()で直接埋め込む方法や、テーマの設定をコードで制御する方法を検討しましょう。
✅ チームメンバーに共有する場合
- 他のメンバーにもテーマ設定を反映させたい場合は、
config.tomlを共有して、それぞれの環境に配置してもらうか、STREAMLIT_CONFIGを使ってプロジェクト内の設定ファイルを使うと便利です。
8. まとめ
Streamlit のテーマ設定を使えば、以下のようにアプリの見た目を柔軟にカスタマイズできます：
✅ ダーク／ライトモードの切り替え
✅ 強調色や背景色、フォントの変更
✅ STREAMLIT_CONFIG を使えば設定ファイルの場所も自由
アプリの目的や利用者に合わせたデザインを施すことで、より親しみやすく、使いやすいアプリに仕上がります。ぜひテーマ設定を活用してみてください！
🔗 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント