【Python・tkinter】Comboboxのフィールドとドロップダウンリストの色の指定・変更方法

投稿日 2022/03/08

はじめに

上記画像の通り、tkinterでJ1・J2・J3の順位表GUIアプリを制作したが、Comboboxと表がデフォルトのままなのが寂しくなり、色を変更しようと思い立つ。

表の方は、全くややこしくない。

ところが、Comboboxの色変更はちょっとややこしいことになっている。
そこのところを解説してみる。

表の色変更

表の色変更は以下の通り、ヘッダーのスタイルと各行のスタイルを設定したコードに各々backgroundやらforegroundやらを追加して色指定したら完成。

# 表のスタイル設定
Style.configure("Treeview.Heading", font=("Yu Gothic UI", 12, "bold"), padding = (0,7,0,7), background = Orange, foreground = White, borderwidth = 0)   # ヘッダーのスタイル
Style.configure("Treeview", font=("Yu Gothic UI", 14), rowheight = 40, foreground = Kon)   # 各クラブのスタイル
︙
︙
# tagが奇数(レコードは偶数)の場合のみ、背景色の設定
Tree.tag_configure(j, background = Pale_Orange)

以上。

全体のコードは以下をご覧あれ。

PythonのtkinterでJ1・J2・J3の順位表GUIアプリの制作とComboboxで順位表切り替え方法【Docker & Jupyterlab環境】

PythonのtkinterでJリーグの順位表をスクレイピングして表示させるGUIアプリを制作してみた結果、Comboboxの切り替えで別リーグの順位表に切り替わる方法が判明したのでその報告。

Comboboxの色変更

実は、色指定しなければならない箇所が意外に多い。
なので、少々細かいが、1つずつ解説していく。

Comboboxのデフォルト

色指定していない状態。

fieldbackground（フィールド背景色）の変更

フィールド全体の背景色がグレーから薄オレンジに変更された。

selectbackground（他を選択した時の文字の背景色）の変更

J1周りの背景色がグレーから薄オレンジに変更された。しかしその周辺の背景色は変更されず。

selectforeground（他を選択した時の文字色）の変更

J1の文字色が黒から紺色に変更された。

background（矢印ボタンの背景色）の変更

Combobox右側の矢印ボタンの背景色がオレンジに変更された。
backgroundは矢印ボタンの背景色の指定なのに注意。

foreground（非選択時の文字色）の変更

J1の文字色が黒から紺色に変更された（画像は、判別しやすいようにこの時だけオレンジにしている）。
selectforegroundとの混同注意。

arrowcolor（矢印ボタン色）の変更

Combobox右側の矢印ボタンの矢印色が黒から白に変更された。

arrowsize（矢印の大きさ）の変更

Combobox右側の矢印ボタンの矢印の大きさが変更された。

bordercolor（Comboboxの枠色）の変更

Comboboxの枠色が白に変更された。

popdown listbox（ドロップダウンリスト又はプルダウン）のデフォルト

色指定していない状態。

popdown listbox（ドロップダウンリスト又はプルダウン）の選択時の背景色の変更

popdown listbox（ドロップダウンリスト又はプルダウン）の選択時の背景色がオレンジに変更された。

popdown listbox（ドロップダウンリスト又はプルダウン）の選択時の文字色の変更

popdown listbox（ドロップダウンリスト又はプルダウン）の選択時の文字色が白に変更された。

popdown listbox（ドロップダウンリスト又はプルダウン）の文字色の変更

popdown listbox（ドロップダウンリスト又はプルダウン）の文字色が紺色に変更された（画像は、判別しやすいようにこの時だけオレンジにしている）。

Comboboxの色指定のコード

今回のComboboxはReadonlyで使用しているので、以下のコードもReadonly時の指定方法である。

# Tkクラス生成
Root = tk.Tk()

# スタイル設定
Style = ttk.Style()


# 色指定
Orange = "#ff7e00"
Light_Orange = "#ff9e40"
Pale_Orange = "#ffead8"
Kon = "#1c2f56"
White = "#ffffff"


# Comboboxの色を設定（Comboboxの挙動ごとに色が変化するのを防止）
Style.map("office.TCombobox",
    # Comboboxのフィールド背景色
    fieldbackground=[
        ("readonly", "!focus", Pale_Orange),
        ("readonly", "focus", Pale_Orange)
        ],
    # Comboboxで他を選択した時の文字の背景色
    selectbackground=[
        ("readonly", "!focus", Pale_Orange),
        ("readonly", "focus", Pale_Orange)
        ],
    # Comboboxで他を選択した時の文字色
    selectforeground=[
        ("readonly", "!focus", Kon),
        ("readonly", "focus", Kon)
        ],
    # Comboboxの矢印ボタンの背景色
    background=[
        ("readonly", "!focus", Orange),
        ("readonly", "focus", Orange)
        ],
    # Comboboxの文字色
    foreground=[
        ("readonly", "!focus", Kon),
        ("readonly", "focus", Kon)
        ],
    # Comboboxの矢印ボタン色
    arrowcolor=[
        ("readonly", "!focus", White),
        ("readonly", "focus", White)
        ],
    # Comboboxの矢印ボタンの大きさ
    arrowsize=[
        ("readonly", "!focus", "18"),
        ("readonly", "focus", "18")
        ],
    # Comboboxの枠色
    bordercolor=[
        ("readonly", "!focus", White),
        ("readonly", "focus", White)
        ]
    )

# Comboboxのpopdown listbox（ドロップダウンリスト又はプルダウン）の選択時の色を設定
Root.option_add("*TCombobox*Listbox*selectBackground", Light_Orange)   # 背景色
Root.option_add("*TCombobox*Listbox*selectForeground", White)   # 文字色
# Comboboxのpopdown listbox（ドロップダウンリスト又はプルダウン）の文字色を設定
Root.option_add("*TCombobox*Listbox*foreground", Kon)   # 文字色

Readonly以外での色指定は、下記のように「!readonly」としたら上手くいく、かもしれない（試していない）。

('!readonly', '!focus', Orange),
('!readonly', 'focus', Orange)

以上を全て指定すると、以下の通りになる。

全体の話は以下をご覧あれ。

PythonのtkinterでJ1・J2・J3の順位表GUIアプリの制作とComboboxで順位表切り替え方法【Docker & Jupyterlab環境】

参照元

Comboboxのフィールドの色変更方法、特にreadonlyを指定した時

ttk.Combobox glitch when state is read-only and out of focus

When a ttk.Combobox is read-only and not in focus, its text background gets white which differs from the gray field background and makes the combobox look ugly: The desired style would be the seco...