---
title: "#30DaysOfStreamlit Day16 Streamlitアプリのテーマカスタマイズ"
description: "この記事では、#30DaysOfStreamlitの内容の紹介を行います。\nconfig.tomlを編集することで同一ディレクトリ内のStreamliアプリケーションのテーマをカスタマイズできます。"
---

[AIDXナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/aidx)

# [#30DaysOfStreamlit Day16 Streamlitアプリのテーマカスタマイズ](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day16-streamlitアプリのテーマカスタマイズ)

 作成者: [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo)｜2023年12月19日

## はじめに

この記事では、#30DaysOfStreamlitの内容の紹介を行います。   
#30DaysOfStreamlitについては[コチラの記事](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlitをやってみた)を参照してください。

config.tomlを編集することで同一ディレクトリ内のStreamliアプリケーションのテーマをカスタマイズできます。

## 構築する目標

テーマのカスタマイズを確認するデモアプリを作成します。   
`.streamlit/config.toml`のHTML HEXコードをカスタマイズしてみます。

## アプリケーションの構築

アプリケーションを構築していきます。  
まずは、Pythonスクリプトです。

続いてテーマをカスタマイズするための.streamlit/config.tomlを作成していきます。

この時、`config.toml`の配置としては上記のPythonスクリプトと同列のディレクトリに`streamlit`というフォルダを作成してその中に配置します。

## コードの解説

ここからは各コードの解説を行います。

**Pythonコード**  
まずは、必要なライブラリをインポートします。

続いてアプリケーションのタイトルを追加します。

次に.streamlit/config.toml の内容を記述する旨をst.writeを使い記述して内容をst.codeで記述しました。

最後に、サイドバーにスライダー ウィジェットを作成し、選択した番号を表示します。

**config.toml**  
テーマをカスタマイズする為のconfig.tomlの解説を行います。  
`primaryColor="#F39C12"`- これにより、原色がオレンジに設定されます。スライダー ウィジェットのオレンジ色に注目してください。  
`backgroundColor="#2E86C1"` -これにより、背景色が青に設定されます。  
メイン パネルの背景色が青色であることに注目してください。  
`secondaryBackgroundColor="#AED6F1"` -これにより、二次背景色が濃い灰色に設定されます。  
サイドバーの灰色の背景色とメイン パネルのコード ボックスの背景色に注目してください。`textColor="#FFFFFF"` -文字色は白に設定されています。  
`font="monospace"` -これにより、フォントが等幅に設定されます。

## テーマの比較

最後にカスタマイズテーマを実装した時とデフォルト時の比較画像を載せます。

- デフォルトテーマ
- カスタマイズテーマ

[完全な記事を表示](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day16-streamlitアプリのテーマカスタマイズ)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Budo Ogimoto"
  },
  "dateModified" : "2023-12-19T03:13:04.500Z",
  "datePublished" : "2023-12-19T03:13:04Z",
  "headline" : "#30DaysOfStreamlit Day16 Streamlitアプリのテーマカスタマイズ",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1531,
    "url" : "https://download.insight-lab.co.jp/hubfs/30days_logo.png",
    "width" : 3121
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day16-streamlitアプリのテーマカスタマイズ",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "AIDXナレッジ - INSIGHT LAB"
  }
}
```