Change the color of the Tabcontrol (background, tab, scrollbar)?

Question

How can I change the color of the background, tabs and scrollbar to obtain this example in the photo?

Open tabs are red, while unopened tabs are orange. And then the red background to the open tabs. Scrollbar yellow. In addition, the title text is all white (not black) tabs

Thank you

import tkinter as tk                    
from tkinter import ttk
  
root = tk.Tk()
root.title("Tab Widget")
root.attributes('-zoomed', True)
tabControl = ttk.Notebook(root, style='Custom.TNotebook', width=400, height=220)
  
tab1 = ttk.Notebook(tabControl)
tab2 = ttk.Notebook(tabControl)
  
tabControl.add(tab1, text ='Tab 1')
tabControl.add(tab2, text ='Tab 2')
tabControl.place(x=1, y=1)

#tab 1
a = ttk.Frame(tab1)
canvas = tk.Canvas(a)

scrollbar = ttk.Scrollbar(a, orient="vertical", command=canvas.yview)
scrollable_frame = ttk.Frame(canvas, width = 500, height = 500)
scrollbar.pack(side="right", fill="y")


b = ttk.Frame(tab1)
tab1.add(a, text="X")
tab1.add(b, text="Y")


#tab 2
c = ttk.Frame(tab2)
d = ttk.Frame(tab2)

root.mainloop()

Derek · Answer 1 · 2022-03-03T12:55:44.380

1

Your question has more to do with ttk style Custom.TNotebook than canvas.

One way to achieve the effect is to create your own theme.

'mytheme' defines new values for Scrollbar, Frame and Notebook.

import tkinter as tk
from tkinter import ttk

master = tk.Tk()
# Create your own Style theme
style = ttk.Style(master)

# Define your color scheme
RED = "#ff0000"
ORANGE = "#ffa500"
YELLOW = "#ffff00"
TROUGH = "#668877"

style.theme_create(
    "mytheme",
    parent = "default",
    settings = {
        "TScrollbar": {
            "configure": {
                "background": YELLOW,
                "troughcolor": TROUGH,
                "lightcolor": ORANGE,
                "borderwidth": 1},
            "map": {
                "background": [("active", ORANGE),
                               ("disabled", YELLOW)],
                "arrowcolor": [("active", YELLOW),
                               ("disabled", ORANGE)]}},
        "TFrame": {
                "configure": {
                    "background": RED}},
        "TNotebook": {
            "configure":
            {
                "background": ORANGE}},
        "TNotebook.Tab": {
            "configure":
            {
                "background": ORANGE},
            "map": {
                "background": [("selected", RED)]}}})

style.theme_use("mytheme")

master.rowconfigure(0, weight = 1)
master.columnconfigure(0, weight = 1)

tab = ttk.Notebook(master)
tab1 = ttk.Notebook(tab)
tab2 = ttk.Notebook(tab)
  
tab.add(tab1, text = "Tab 1")
tab.add(tab2, text = "Tab 2")

# changed place manager so tkinter can calculate master size.
tab.grid(row = 0, column = 0, sticky = tk.NSEW)

#tab 1
a = ttk.Frame(tab1)
# canvas needs scrollregion and remove all surrounding space
canvas = tk.Canvas(
    a,
    background = RED, highlightthickness = 0,
    borderwidth = 0, scrollregion = "0 0 1000 1000")
# important! pack canvas
canvas.grid(row = 0, column = 0, sticky = tk.NSEW)

scrollbar = ttk.Scrollbar(
    a, orient = tk.VERTICAL, command = canvas.yview)
scrollbar.grid(row = 0, column = 1, sticky = tk.NS)
# important! connect canvas to scrollbar
canvas["yscrollcommand"] = scrollbar.set

b = ttk.Frame(tab1)
tab1.add(a, text = "X")
tab1.add(b, text = "Y")

#tab 2
c = ttk.Frame(tab2)
d = ttk.Frame(tab2)
tab2.add(c, text = "A")
tab2.add(d, text = "B")

master.mainloop()

edited Mar 03 '22 at 12:55

answered Mar 03 '22 at 06:43

Derek

1,916
2
5
15

I am having difficulty applying your code to my code. Can you show me a complete answer which also has my code on which your code is applied? Thank you – Mar 03 '22 at 12:38
Sure I'll append it to the answer. – Derek Mar 03 '22 at 12:42
I thank you so much. You're kind. However, I forgot to ask how to change the color of the scrollbar when you select it (if you select it becomes orange, instead I want it green for example), and how to change the gray color of the remaining scrollbar of your code (for example I would like it blue for do an example). Could you suggest these two things please? I will later accept your answer as a solution. Meanwhile, I voted. Thanks and sorry – Mar 04 '22 at 01:53
You can choose any color you like. Look at `TScrollbar` map background active as ORANGE. – Derek Mar 04 '22 at 03:45
So you wrote the complete setting list? What is the color command when you select the scrollbar with the mouse (without clicking) and what is the color of the remaining scrollbar (currently gray). What are these 2 commands called? Thank you – Mar 04 '22 at 03:50
Only now I notice that applying your code removes the "clam" style I used to use. Now the graphics and the style of the widgets are very bad. Before with the clam style it was better. How can I continue to use the clam style + your code to change the color of the tabcontrol? It seems exaggerated to change the entire graphics style of my software, just because I want to change the color of a tab control. Thank you – Mar 04 '22 at 04:27
In theme_create under settings the use of parent = 'default' can be changed to 'clam' or any other theme. – Derek Mar 05 '22 at 00:31
I tried replacing default with clam. There is a problem. The clam style only applies to widgets (e.g. combobox) but not to tabcontrol tabs. For example before using your code, I only used the clam style and the tabs had a rounded, spacious and elegant shape. Now with your code, the tabs are a bit poor and not very elegant. Look at the difference in my upload https://ibb.co/0j894kq Do you know how I can solve? I would like to get the rounded tabs I used before your code. – Mar 06 '22 at 06:32
It works fine for me. Are you running the code as is or are you using it with other code? – Derek Mar 06 '22 at 12:41
You are wrong. I tried copying and pasting your code identically. I have only replaced default with clam. The result is this https://ibb.co/WvZvHXj Instead I look for it like this https://ibb.co/0j894kq , so as it was previously without applying your style. Look at the tabs – Mar 06 '22 at 20:29
Your question was specifically about colors and that question has been answered. Any other questions should be posted separately. – Derek Mar 06 '22 at 23:46
Yes, but it was otherwise that I wanted to keep the same clam style I had. I just wanted to change the colors. Instead with your code I change the colors, true, but I also change the style that I had previously in the cap of the question. Basically your code solved one problem for me and caused me another – Mar 06 '22 at 23:49

Change the color of the Tabcontrol (background, tab, scrollbar)?

1 Answers1

Linked