Custom Dark Mode Title Bars in Tkinter! (2023)


Find the Code here:

After many hours of trying to find a reliable and good looking Title bar in Tkinter, I just decided to make my own. I was very happy with the results! If you have any suggestions on how to make this better please let me know. This sleek design and functionality is exactly what I was after when making nice looking GUI's in Windows.

Thanks for watching and I hope this helps you out! Consider subscribing and taking a look at some of my other videos. Here are some related videos:

30 Minute GUI:
NASA SPace app GUI:
AIM GUI App for Windows:

#tkinter #python #programming


Hey, everybody, what is up? My name is taranovatek.

And today, I'm going to be showing you some custom.

Well, a custom menu title bar for your kinter projects.

Uh, one thing that they are notorious for is having kind of a janky way of creating your own menu bar.

So I wanted to show you how I was able to overcome this.

And I found a few examples online on stack overflow, but they weren't really that good for some reason they were always buggy or just didn't look the way I wanted it to.

So let me show you an example.

I was building this program.

The other day that shows all of the installed programs on your computer.

And you can add them to a list and run the programs sort of like this twitch thing that's been going around.

And one thing that was really bothering me was the title bar, it's, always like this.

You can change the icon sure, but you can never really change the color.

However, you can override it.

Meaning, you can disable it and then start creating your own, but it's, very buggy.

And what I mean by that is when you run the program it and try to click and drag, you might notice the mouse snaps to the left, some things don't really work on it that well, it's really buggy and kind of annoying.

But this is what I landed on right here and it's sad because it's 100 lines of code almost, but it is exactly how I want it.

So I'm very excited about this.

So let me run it and show you what it looks like.

So this is it right here.

And you can obviously change the name to whatever you'd like.

But this is, this is fabulous.

I mean, you can even add an icon on the top left.

This is exactly how I want.

It it's very sleek, modern.

You can make it bigger.

But for my app, I wanted it quite small.

And then you have these hover animations.

You can minimize the screen you can exit.

Everything works functionally speaking on it, which is great.

So let me show you how I achieve this.

So, um, the first thing is, I set my sk, my color scheme, um to like dark, grays and everything.

So I could reuse those later on, and then I have all of these buttons and labels.

So I used a label tkinter label for the text on the top left, and the rest are buttons, uh, fairly so because they are buttons.

And then you pack them in to the title bar, which is uh up here.

So we're using a frame for the top bar.


So it's a kinter frame and we're packing things into the frame and let's see.

So we have title bar we expand it.

We fill it in the x direction.

And then we can pack title bar title to the left and all the buttons to the right and the window don't worry about the window.

You can I have a note here you can replace that with your program later down the road.

So the windows just to show that you can pack things underneath it that's.

What this darker box is below that's where your actual app will go, um.

And then I have a bunch of these things.

So all of these functions right here are for one sole purpose.

And that is that animation on the top right? So when we hover over, um, these buttons, they will change the hover.

So so I took inspiration from these up here.

If you hover over these two they're lighter gray and then red for the x, so I sort of replicated that idea.

And then these are just ascii.

These two icons are just ascii symbols.

Um, I can't remember the alt codes.

But if you look them up, you can find them that's, just a regular x in a calibri.

So anyway, they define defining function, um to change the background to light gray or regular gray that's, what the r gray stands for.

And then this is to get rid of this whole function.

Right here functions are to get rid of the whole bug, where if you've used the, if you use custom menu bars in kinter, you'll know that when you click here in the middle and move the mouse will snap to the top left, which is it's fine, but it looks really trashy.

So what this does is it gets the position of the x and y in your mouse defined by a button motion, a b1 motion right here to get the position of the mouse.

So you have title bar dot bind to the mouse position, and it gets that position and moves it in that position.

So it doesn't snap to the left anymore, which is awesome, but that also caused a problem where, um, you couldn't, move it the window.

So I had to put the function of move in there like this it's kind of wonky looking, but it works really smoothly.

I found so and it's, not it's, not laggy at all.

It works.

It works great.

So, um, anyway, uh, minimize and frame mapped.

This is for the sole purpose of minimizing.

So what happens here is this minimize function works on its own just fine, and it will minimize it.

But if you actually look closely, you can see the at the original white menu bar show up very quickly.

Unfortunately, there's, no way around this, unless maybe can we do this first, I wonder make it false.

I just realized that talking to you guys now, nah it doesn't matter.


So anyway, um.

So it it basically the minimize function disables or I'm, sorry, it enables falses enabling the, um, the original menu bar.

And the reason for that is is because we have to call it true when we call this frame mapped function.

And what that does is when you click on the bar at the bottom.

So before without this frame mapped function, if I hit minimize and I unminimized it, it would have my frame, and it would have the original kinder frame on top.

So this basically just sets it back to true.

And I think if we print event here, whoops, print event or e, we can actually see the function being called when we bring the minimize function back in.

So if I minimize, and I click this right here, boop, you can see the map event is called right.

So that's, that's, essentially what's happening is when you when you unminimize it, the the frame it gets that function called and sets it back to true, which true is disabled, which is kind of hard to wrap your head around, but there you go.

So you can just keep doing that.

And it keeps printing the map event and disabling it when you bring it up.

Luckily, it doesn't look trashy when you bring it back up it doesn't.

I mean, if you're really not paying attention to it, you can't really tell anyway, but that's that's as smooth as I've gotten that.

So and that's pretty much it.

The rest are, um button, binds, uh mapped down here.

And then I have a little bit of an explanation about that frame mapped function here because it's it's, not very intuitive.

These are these are intuitive, you're binding it to enter and leave that's the hover and button.

One's, just a left click.

So anyway, there you go so I'm.

This is about as raw as it gets like there's, no there's, nothing custom here other than the title bar.

So what I'm going to do is I'm going to share this on my github.

And if you want to mess around with it use it for your own projects, I'm giving you guys full rights to have it.

Most of this was poached.

Anyway, also fun fact, and I did not know this.

And no one taught me this.

And I just learned it today, even though I've been working with kinter for a long time.

This root dot geometry, plus 500, plus 300, right here.

Um, that is this.

The plus 500 plus 300 is where it starts on the screen.

So if I change this to two, maybe you guys, don't know this it starts over over on the left hand side.

And if I change this to five it'll start more to the right, this is phenomenal and I'm so upset that I didn't know this because oh man, this is just so cool.

I don't know about you guys.

But every time I start a new kinter project.

It actually drives me bonkers on where the thing starts.

And you can actually start it in full screen mode, too.

So just just as a heads up, those are things you can do I didn't know that maybe that's beginner level stuff.

I don't know, but I figured I'd sh, excuse me I'd share, um.

So there you go.

This will be in my, um, this will be in my github link below if you want to just copy paste it in your next kinter project, go for it.

And I hope you guys enjoy it.

This is really exciting for me.

I couldn't find one that was good.

And I feel like this one's actually good.

If you guys also have any suggestions and you're, not too familiar with kinter and messing around with it.

And you want to see me change a few things, please, let me know in the comment section below.

But if you enjoyed the video make sure to give it a like consider subscribing and I'll, see you guys in the next video.


What is mainloop () in Python? ›

window.mainloop() tells Python to run the Tkinter event loop. This method listens for events, such as button clicks or keypresses, and blocks any code that comes after it from running until you close the window where you called the method.

What is TTK Python? ›

ttk in Python? TkinterPythonServer Side ProgrammingProgramming. tkinter. ttk is a module that is used to style the tkinter widgets. Just like CSS is used to style an HTML element, we use tkinter.

How do you make labels in Python? ›

  1. from tkinter import *
  2. class Window(Frame):
  3. def __init__(self, master=None):
  4. self.pack(fill=BOTH, expand=1)
  5. text = Label(self, text="Just do it")
  7. #text.pack()
  8. root.wm_title("Tkinter window")

What does root mainloop () do? ›

root. mainloop() is a method on the main window which we execute when we want to run our application. This method will loop forever, waiting for events from the user, until the user exits the program – either by closing the window, or by terminating the program with a keyboard interrupt in the console.

What does root Tk () mean? ›

Tkinter is a Python package which comes with many functions and methods that can be used to create an application. In order to create a tkinter application, we generally create an instance of tkinter frame, i.e., Tk(). It helps to display the root window and manages all the other components of the tkinter application.

What is the difference between TTK and Tk widget? ›

That is the real difference between the two: Tkinter widgets are more configurable, and ttk is more modern and it is configurable with styles which are really handy shortcuts. And Tkinter is like the core of the window and ttk is styling. Think of it like this: Tkinter --- HTML, ttk --- CSS, Python --- JavaScript.

How to complete Python in 30 days? ›

Days 1-9: Introduction to Python
  1. Day 1: Introduction to Python Programming. ...
  2. Day 7: Python Dictionaries. ...
  3. Day 10: Working with External Libraries. ...
  4. Day 16: How to Sort Data in a Pandas DataFrame. ...
  5. Day 22: Data Cleaning and Preparation. ...
  6. Day 24: Plotting in Python with Matplotlib. ...
  7. Day 26: Introduction to Machine Learning in Python.

What does from tkinter import * mean? ›

The significance of "import *" represents all the functions and built-in modules in the tkinter library. By importing all the functions and methods, we can use the inbuilt functions or methods in a particular application without importing them implicitly.

What is title () in Python? ›

The title() method returns a string where the first character in every word is upper case. Like a header, or a title. If the word contains a number or a symbol, the first letter after that will be converted to upper case.

What is PADX and PADY in Python? ›

padx , pady -- the number of pixels surrounding the widget to create a padding between other widgets, for horizontal or vertical padding. ipadx , ipady -- how many pixels to use for padding inside the widget, also for horizontal or vertical padding.

How do you scrape a title in Python? ›

  1. Import module.
  2. Initialize the Browser() instance.
  3. Retrieves the webpage content Browser. open().
  4. Display the title with Browser. title()
Apr 4, 2022

How do I create a label in GUI Python? ›

To use a label, you just have to specify what to display in it (this can be text, a bitmap, or an image). Syntax: w = Label ( master, option, … )

How do you add a title to a plot in Python? ›

How to add a title to a plot
  1. import matplotlib. pyplot as plt.
  2. import numpy as np.
  3. x= np. array([1, 5])
  4. y = np. array([10, 20])
  5. plt. plot(x, y)
  6. # usig the title() method.
  7. plt. title('Y against X')
  8. # using the xlabel() and ylabel() methods.

What is place () in Python? ›

Python - Tkinter place() Method

This geometry manager organizes widgets by placing them in a specific position in the parent widget.

What is TCL in Python? ›

Tcl is a general purpose multi-paradigm system programming language. It is a scripting language that aims at providing the ability for applications to communicate with each other. On the other hand, Tk is a cross platform widget toolkit used for building GUI in many languages.

What does sticky mean in Python? ›

sticky -- specifies a value of S , N , E , W , or a combination of them, e.g. NW , NE , SW , or SE . The parameter tells which side of the "cell" the widget will "stick" to . If you use W+E+N+S , then the widget will fill up the "cell".

How to install TTK in Python? ›

However, if we missed installing Tkinter while installing Python, we can do it later using the pip command.
  1. Step 1 − Make sure Python and pip is preinstalled on your system. Type the following commands in command propmt to check is python and pip is installed on your system. ...
  2. Step 2 − Install Tkinter.
Mar 11, 2021

How do I open one GUI from another GUI in Python? ›

You can't "call" another GUI. If this other GUI creates its own root window and calls mainloop() , your only reasonable option is to spawn a new process. That's a simple solution that requires little work. The two GUIs will be completely independent of each other.

What is grid in Python? ›

The grid() method allows you to indicate the row and column positioning in its parameter list. Both row and column start from index 0. For example grid(row=1, column=2) specifies a position on the third column and second row of your frame or window.

What is the difference between control and widget? ›

A graphical widget (also graphical control element or control) in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application.

What is a toplevel widget? ›

A Toplevel widget is used to create a window on top of all other windows. The Toplevel widget is used to provide some extra information to the user and also when our program deals with more than one application.

Which are the two base types of widget? ›

These widgets provide fundamental functions to easily create web apps. Most of them have parameters that allow configuration and customization. In general, widgets are categorized as two types: off-panel and in-panel.

Can I study Python in 2 days? ›

In general, it takes around two to six months to learn the fundamentals of Python. But you can learn enough to write your first short program in a matter of minutes. Developing mastery of Python's vast array of libraries can take months or years.

Can I learn Python at 40 years old? ›

Let's get this out of the way: no, you are not too old to program. There isn't an age limit on learning to code, and there never was. But all too often, insecurity and uncertainty compel older adults to put a ceiling on their achievement potential.

Can I learn Python in 2 hours? ›

Python Basics for Absolute Beginners

6 within just 2 hours. The Basics of Python course covers, the concepts of Python Programming in 2 hours, and then you'll be creating your own applications, working with coding quizzes and challenges to excel what you learned.

What is __ import __ in Python? ›

The __import__() in python module helps in getting the code present in another module by either importing the function or code or file using the import in python method. The import in python returns the object or module that we specified while using the import module.

What is the difference between Tk and Tk? ›

This is dependent on how you're importing and if you're importing only specific components from a module or the entire module. To more specifically address your question, tk is the name you have given the module, and Tk() is the class inside that module that you are instantiating.

Why not use import * in Python? ›

Using import * in python programs is considered a bad habit because this way you are polluting your namespace, the import * statement imports all the functions and classes into your own namespace, which may clash with the functions you define or functions of other libraries that you import.

What is the difference between title () and capitalize ()? ›

The difference between them is that Python string method title() returns a copy of the string in which the first characters of all the words are capitalized whereas the string method capitalize() returns a copy of the string in which just the first word of the entire string is capitalized.

What is the difference between title () and capitalize () Python? ›

title() – Python title() method returns a title cased string by converting the initial letter of each word to a capital letter. capitalize() – The capitalize() method only capitalizes the first character of the string i.e. it converts only the first letter of the input string into uppercase and others to lowercase.

What does upper () do in Python? ›

The upper() method returns a string where all characters are in upper case.

What are the 3 layout manager in Python? ›

Different Layout Managers in Python's TKInter GUI package
  • Pack Layout Manager.
  • Grid Layout Manager.
  • Place Layout Manager.

What is anchor in Python? ›

Anchors are used to define where text is positioned relative to a reference point. Here is list of possible constants, which can be used for Anchor attribute.

How do you check title case in Python? ›

The istitle() method will check if a string is a title-cased string. This method returns True if the string is title cased. Otherwise, it returns False . If the string is empty, then False is returned.

How do you convert a string to a title in Python? ›

To convert a string to title case in Python, you can use the str. title() method, which will capitalize each word in a string.

How to create UI design in Python? ›

The following code demonstrates the steps in creating a UI.
  1. from tkinter import * window=Tk() # add widgets here window.title('Hello Python') window.geometry("300x200+10+20") window.mainloop()
  2. Example: Button. ...
  3. Example: Label. ...
  4. Example: Create Widgets. ...
  5. Example: Selection Widgets. ...
  6. Example: Even Binding. ...
  7. Example:

What is a label widget? ›

The Label widget is used to display static text on a form. It can be used as a form label or an area header with various text alignments and styles.

How do I change the text color in Python GUI? ›

Let us suppose we want to change the color of certain words in a text widget, then we can use the tag_add(tag name, range) method which selects the word we want to format. Once the word has been selected, we can change its color, background color, and other properties using the tag_config(properties) method.

How do you make a variable title in Python? ›

How to add a variable to Python plt. title?
  1. Create data points for x and y using numpy and num (is a variable) to calculate y and set this in title.
  2. Plot x and y data points using plot() method with red color.
  3. Set the title of the curve with variable num.
  4. To display the figure, use show() method.
May 8, 2021

What is the difference between Set_title and title? ›

Adding titles in matplotlib with title and set_title

The difference between these two functions is that the first is for adding a title for a single plot while the latter is for adding titles for subplots. The selection between each function will depend on the number of plots and the approach you want to use.

How do you add a title to a bar plot? ›

Click the chart, and then click the Chart Design tab. Click Add Chart Element > Chart Title, and then click the title option that you want. Type the title in the Chart Title box. To format the title, select the text in the title box, and then on the Home tab, under Font, select the formatting that you want.

How do I add custom data labels to a bar chart? ›

Add data labels

Click the chart, and then click the Chart Design tab. Click Add Chart Element and select Data Labels, and then select a location for the data label option. Note: The options will differ depending on your chart type. If you want to show your data label inside a text bubble shape, click Data Callout.

How do you annotate a bar plot in Python? ›

To annotate bars in a bar plot with Matplotlib, we can make use of this algorithm −
  1. Import the necessary libraries.
  2. Create a figure object using plt. ...
  3. Add a subplot to the figure using fig. ...
  4. Create the bar plot using ax. ...
  5. Loop through the bars and add annotations using ax.
Mar 24, 2023

How do you add multiple labels in Python? ›

To display multiple labels in one line with Python Tkinter, we can use the pack() method of label and align all the labels to the same side.

How do you exit Mainloop in Python? ›

win. quit() abruptly quits the application which means the mainloop will still be running in the background. win. destroy() on the other hand terminates the mainloop and destroys all the widgets inside the window.

How do you stop a main loop in Python? ›

In Python, the main way to exit a loop is using the break statement. When the break statement runs in a loop, it will terminate that loop. However, one thing to keep in mind is that break statements will only terminate the innermost loop that it is run inside.

How to connect GUI with Python code? ›

Tkinter Programming
  1. Import the Tkinter module.
  2. Create the GUI application main window.
  3. Add one or more of the above-mentioned widgets to the GUI application.
  4. Enter the main event loop to take action against each event triggered by the user.

Does return break a loop in Python? ›

The break statement exits a loop. break; The return statement exits a method.

How do you make an infinite loop in Python? ›

We can create infinite loops in Python via the while statement. In a loop, the variable is evaluated and repeatedly updated (while the given condition is True). We can create an infinite loop in Python if we set the condition in a way that it always evaluates to True.

How do you break a loop after one iteration? ›

The break statement exits a for or while loop completely. To skip the rest of the instructions in the loop and begin the next iteration, use a continue statement. break is not defined outside a for or while loop. To exit a function, use return .

Is Python good for GUI design? ›

For someone who'd like to design a UI interface of their own, GUI Python is an easy-to-use programing language that can be mastered by almost all levels of users. Now, read on to find more cross-platform frameworks for GUI programming in Python.

Is Python a good language for GUI? ›

This open-source Libavg GUI framework uses Python as the scripting language of choice and serves as one of the best frameworks for developing user interfaces for modern touch-based devices.

Is Python good for GUI programming? ›

Python supports a variety of GUI frameworks or toolkits, from Tkinter which is traditionally bundled with Python, to a number of cross-platform solutions, such as PyQT or wxPython, that you can install as third-party libraries.

How do you link two pages in Python? ›

You can use double-brackets (or double-braces) syntax to link to a page or file name with spaces.

How to create a login page in Python using Tkinter? ›

Create MySQL Database Login Page in Python using Tkinter
  1. tk. label and tk. ...
  2. The function logintodb is created to login into the MySQL Database. The save query includes the query to be executed on the click of the submit button.
  3. X and Y are the parameters given to adjust objects on the Tkinter window.
  4. Root.
Mar 7, 2023

Top Articles
Latest Posts
Article information

Author: Dong Thiel

Last Updated: 04/09/2023

Views: 5303

Rating: 4.9 / 5 (79 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Dong Thiel

Birthday: 2001-07-14

Address: 2865 Kasha Unions, West Corrinne, AK 05708-1071

Phone: +3512198379449

Job: Design Planner

Hobby: Graffiti, Foreign language learning, Gambling, Metalworking, Rowing, Sculling, Sewing

Introduction: My name is Dong Thiel, I am a brainy, happy, tasty, lively, splendid, talented, cooperative person who loves writing and wants to share my knowledge and understanding with you.