python Streamlit学習 Themes

テーマ色の編集

Streamlitはアプリを表示しているユーザーのオペレーティングシステムとブラウザーによってライトモードまたはダークモードの設定を確認しその設定をを使用します。

それ以外の場合、Lightテーマがデフォルトで適用されます。

「☰」→「設定」からアクティブなテーマを変更することもできます。

変更イメージは、streamlitドキュメントのテーマ項目の動画が分かりやすくなっています。

独自色のテーマの設定方法も記載されています。

テーマを定義するときに使用できるオプション

表示アイテムの色も[theme]タグで設定できます。

例
[theme]
primaryColor="#F63366"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#262730"
font="sans serif"

primaryColor

Streamlitアプリ全体で最も頻繁に使用されるアクセントカラーを定義します。

st.checkbox　st.slider　st.text_inputに影響します。

backgroundColor

アプリのメインコンテンツ領域で使用される背景色を定義します。

SecondaryBackgroundColor

コントラストを追加するために2番目の背景色が必要な場合に使用されます。

サイドバーの背景色やほとんどのインタラクティブウィジェットのプロットの背景色としても使用されます。

textColor

フォントを選択します。有効な値は、"sans serif"および "serif"です。

"monospace"は、デフォルトで"sans serif"未設定または無効の場合に設定されます。

base

次のように記述するとStreamlitLightテーマをカスタムテーマとして再作成できます。

[theme]
base="light"

Streamlit DarkテーマにprimaryColorを適用する場合

[theme]
base="dark"
primaryColor="purple"

テーマのフォントをserifに変更するカスタムテーマ

base自体が省略されている場合、デフォルトでに設定される"light"ため、次の構成を使用して、StreamlitLightテーマのフォントをserifに変更するカスタムテーマを定義できます。
[theme]
font="serif"