CODEWITHSUNDEEP
pythonpython-3.xtkinter
user2650746
user2650746

Reputation: 71

How to change the background color of a Treeview

I'm here to ask you how to change background of a treeview, I tried that

ttk.Style().configure("Treeview", background="#383838")

It's work perfectly just for the cell, but the rest of the Treeview stay white.

I tried to change the background of the window, the frame too, but it does not work.

So, how to do that, i'm sure that you know.

Bye and thanks in advance :)

The code

from tkinter import *
from tkinter import ttk

p=Tk()

separator = PanedWindow(p,bd=0,bg="#202322",sashwidth=2)

separator.pack(fill=BOTH, expand=1)

_frame = Frame(p,bg="#383838")

t=ttk.Treeview(_frame)

t["columns"]=("first","second")
t.column("first",anchor="center" )
t.column("second")
t.heading("first",text="first column")
t.heading("second",text="second column")
t.insert("",0,"dir1",text="directory 1")
t.insert("dir1","end","dir 1",text="file 1 1",values=("file 1 A","file 1 B"))
id=t.insert("","end","dir2",text="directory 2")
t.insert("dir2","end",text="dir 2",values=("file 2 A","file 2 B"))
t.insert(id,"end",text="dir 3",values=("val 1 ","val 2"))
t.insert("",0,text="first line",values=("first line 1","first line 2"))
t.tag_configure("ttk",foreground="black")

ysb = ttk.Scrollbar(orient=VERTICAL, command= t.yview)
xsb = ttk.Scrollbar(orient=HORIZONTAL, command= t.xview)
t['yscroll'] = ysb.set
t['xscroll'] = xsb.set

ttk.Style().configure("Treeview", background="#383838",foreground="white")
p.configure(background='black')

t.grid(in_=_frame, row=0, column=0, sticky=NSEW)
ysb.grid(in_=_frame, row=0, column=1, sticky=NS)
xsb.grid(in_=_frame, row=1, column=0, sticky=EW)
_frame.rowconfigure(0, weight=1)
_frame.columnconfigure(0, weight=1)

separator.add(_frame)

w = Text(separator)
separator.add(w)

p.mainloop()

Upvotes: 7

Views: 14968

Answers (3)

Parvez Nadvi
Parvez Nadvi

Reputation: 21

This is a possible solution if the suggested answer by @msw does not work for you.

For folks, who are not able to see any changes in terms of coloring the Treeview even after configuring the Style and/or tags, Please refer this video: Youtube link

Easy Fix: Found from @Durai comment on this article

Add this line to edit the map configuration in your code:

# set backgound and foreground color when selected
style.map('Treeview', background=[('selected', '#BFBFBF'), foreground=[('selected', 'black')])

Another Hardcode way:

Theme files for ttk are present in C:/< Python installation folder>/tcl/tk8.6/ttk/

vistaTheme.tcl is the default theme that ttk uses.

You need to change/add the below code to the theme file under Treeview(end of file) in order for it to work:

ttk::style map Treeview \
        -background {disabled $colors(-frame)\
                        selected lightblue\
                        selected $colors(-selectbg)} \
        -foreground {disabled $colors(-disabledfg)\
                        selected black\
                        selected $colors(-selectfg)}

In my case, I had these lines missing from the theme file so I added them below Treeview and then ran my code, I can finally see colors on my Treeview

Upvotes: 0

Arnab Das
Arnab Das

Reputation: 157

if flag == False:
    tree.insert('', 'end', values=(valx[0], valx[1], valx[2], valx[3]),tags=('odd',))
else:
    tree.insert('', 'end', values=(valx[0], valx[1], valx[2], valx[3]),tags=('even',))

tree.tag_configure('odd', background='#008001')
tree.tag_configure('even', background='#FFFF00')

Upvotes: 1

msw
msw

Reputation: 43487

The missing option is fieldbackground which I only found by accident in an example. So if you add it to the style declaration

ttk.Style().configure("Treeview", background="#383838", 
 foreground="white", fieldbackground="red")

it works as you'd like. I used red to make the change very visible; obviously you'll want to change that for greater color harmony.

Upvotes: 3

Related Questions