An introduction to customtkinter [way better styling in tkinter]

let's talk about styling modules so far I mostly talked about stuff that you shouldn't do in tkinter in terms of styling this is going to change now because external modules are really good to add style and to use it easily these external modules build on top of the Kinder and improve certain parts of it most of them are styling but they also add a few more extra functionalities custom tkinter and ttk bootstrap are the really common options I'm going to start with custom tkinder because this is what I think is the best option for tkinter in terms of styling it's also the one I really like to use custom taken that works by using the same widgets as ttk but it lets you customize all of them easily on top of that there are also some additional widgets and every single widget has a dark and a light mode that way you can basically create any kind of style that you want before I jump into the code there's one more thing I do want to cover and that is that custom tikkinder has a really good documentation beside with all of the code it's looking something like this although if you scroll down you can already see some demos for the dark and the light mode all of these elements are dynamically generated meaning you can customize a lot of different things here on top of that if you go down a tiny bit further you have the documentation in here on the right side you have all of the different widgets and all of the elements of custom tkinter if I for example click on ctk label there we have an example of the code we have all of the arguments and then we get a bit more information this is literally all we need and here you can see for example we can set the text the width the height the corner radius a foreground color a text color and a font and all of this is very easily implemented I suppose the best example here would be ctk button on the right this is just a simple Button as you can see here you can customize every single element of this button quite easily if you contrast this with standard tkinter well you have to create a style object and in there you have to create a map none of this is necessary here you could simply set a foreground color a hover color a border color a text color a text disabled color basically whatever you want there are lots of different options in here so let's actually create a basic custom teakinter app although for that first of all we have to install custom tkinder because it doesn't come with python by default but that once again we either need the Powershell or The Terminal depending if you are on Windows or on Mac OS in my case I'm using the Powershell so I need pip install custom tkinter although in my case I already have this one installed so it's not doing anything if you were using Mac OS this would be pip free install custom tkinter here we have a completely empty python file the reason why I have nothing ready is because we are not going to use any of the tkinter widgets we have used so far instead I want to import custom tkinter this is going to be kind of annoying to write I usually abbreviate this as ctk the best comparison here is that all of this is fairly similar to TDK in the sense that inside of this ctk module we have a ton of widgets that we can use for example we can use this to create a window this is going to be another window that I want to store in a variable and then here we need ctk and then CT or upper score and then K and lower score don't forget to call this once we have that we can run the entire thing with window.main Loop if I execute the entire thing we already get the window that is looking significantly better a really important thing that you do have to understand is that this ctk window inherits from the tkinter window as a consequence we have all of the default arguments we could use for the window for example we could set a window dot title let me call it a custom tkinter app that is some terrible spelling that looks better if I run this thing now and increase the size we have a custom tkinter app although I just realized there's another typo in there that is looking better besides that we can also set window dot geometry in here as always we need a string with a number let's go with 600 by 400. running this now we get a much larger window with that we have a window next up we can create some widgets for example if we want to create a label I'm going to store this in a variable all we need here is ctk and then ctk with label just like with ttk we need the master which in my case is going to be the window after we have that I can set some text this can be a ctk label this is going to return a widget and this widget I have to place on the window with some kind of layout method let's go with pack if I run this now we have a ctk label so far we have some very basic functionality this ctk label gives us a ton of options for customization just for reference here is the documentation what we could set for example is the corner radius the foreground color and the text color I guess the foreground color here isn't the perfect name this is essentially the background color for this one we can either use a tuple with a light and a dark color or we can use a single color that is called transparent all the colors here we would either use hexadecimal color or one of the inbuilt decanter color names which means I can set an FG color and set this to red if everyone is now we have a red background color on top of that I can set a text color let's go with white here with that we have a white label also I'm going to put all of this over multiple lines that's going to make everything a bit easier to read another useful thing that custom ticket has that ttk actually doesn't have is Corner radius this one determines the corner radius I think that's quite obvious if I set this to a 10 we now have rounded corners for this label with that we have a label next up let's create a button this we create with ctk and then ctk button what you always have to be aware of you have C and T in capital letters and then the K is a lowercase letter now this button like the label is first of all going to need a master which is going to be the window then we need some text I'm going to call this one a ctk button this button I want to pack if I run this now we have a ctk button we can click on it but nothing is going to happen this button now is very easy to customize for example if we now set an FG color or this one let's use an hexadecimal color we can use f f and 0 with that we get yellow on top of that we can set the text color and for this one just to stick with facts the decimal colors I want to have a black color so I'm going to go with 0 0 and 0. now we have a yellow button although if I hover over it we get this dark blue that we can also change although again I want to do all of this over multiple lines so it's a bit easier to read to change the hover color we need well have a color for this one I want to have a slightly darker yellow we started with FF and 0 to get a darker yellow this should be let's go with a a and zero if I run this now I can hover over it and we get a darker yellow other than that the button works like in TDK which means we can add a command this could for example be a Lambda or literally any function but in this case I just want to print e button was pressed I forgot the semicolon now this should be working and if I click on the button we get a button was pressed now that we can execute a command we can work on something really cool in custom tkinder and that is to change the theme between light and dark mode by default custom TK enterp uses the default theme of your system in my case if I run the entire thing again if I show you the settings for Windows like this right now my system setting is dark if I set this to light things will need a second to load but now you can see the app automatically switched to a light mode if I go back to dark Banks need a second again and there we go we have a dark Style app again which is really cool for custom tkinter because it already knows if the user has a dark or a light mode and it and it adjusts for that although you can customize this yourself if you want your app to run in light mode or in my case I want the app to run in light mode once I press the button all you have to do is get ctk set appearance underscore mode you can either set light or you can set dark dark is the one we already have so I want to have light now if I run this and I click on the button we have light mode although if I click on it again nothing is going to happen what is even better is that every single color you can specify usually isn't one color but a tuple of colors let's say for the label if we have a dark mode I want this to be red but if we have a light mode I want this to be blue what you simply do in this way you have a tuple the first argument is the light color the second argument is the dark color which means if I run this again right now we have the dark mode so the color is red for the label but if I click on ctk button now the label foreground color is blue because we have the light mode this system works with every single color for example for a text color I can have white for the dark mode and I can have let's go with black for the light mode if I now click on the button now we have black text and a blue background color exactly what we specified in here if you understand all of this so far you understand the basics of custom tkin term all you really have to do is look at the documentation and then pick and choose whatever widget you want on the right side you have ctk widgets the one I just used was ctk then we have ctk button and ctk label we also have a cdk frame that works like a ttk frame although this one has a background color besides that we have a text box we would have a switch although there's no image we would have a scroll bar also no image let me find one with an image we have a slider this one also doesn't have an image okay uh some bad luck but let's play around with a few more this system here doesn't really change if you followed this series so far you already know how to use all of this let's say for the next part I want to create a frame this one is going to be ctk and frame although I forgot ctk dot ctk frame but this one as always we need a master which is going to be the window if I pack this Frame now you can see this already has a background color if you don't like it you can simply set the FG color to transparent that way it disappears this Frame is going to work like any other frame we have seen so far which means you can add elements in here let's say I want to add a slider in there this we create with cdk and ctk slider the parent now is going to be the frame and let's pack it right away slider.pack there we go now we have a slider in here and this one works like any other slider just to visualize that this is indeed inside of a frame let's remove the background color now we can see that there's a slight background behind the slider if I'm adding some padding let's say pad X is 20 and Pad Y is also 20 now all of this is much more visible what you can also do is combine custom tkinter with standard tick hinder for that though I have to import import tkinter SDK and I want from the Kinder import TDK it is totally fine to combine ttk widgets with custom tkinter widgets although most of the time the ttk widgets especially when you put them right next to the custom tkinder widgets they start to look really bad so generally I wouldn't recommend doing it however what you might want to do is use the T content variables those work perfectly fine with the custom TK and have variables for example for the label I can create a let's call it a string VAR which is going to be TK and string VAR order value here we could set a custom string this string VAR we can set as the text variable for the label so string VAR exit in here and now we get a custom string for the label although strictly speaking custom tkinter also has inbuilt taken to variables we get those by simply using ctk and then we can use stringvar intvar and so on which means if I have ctk instead of TK we're not going to see a difference right now the ctk and the TK variables are identical although that might change in the future if you are using teak into variables and using custom tkinter use the custom teak into variables with that we have all of the basics of custom tkinter it really doesn't get that much more complicated which means we can do an exercise and then we are done what I want you guys to do is going to look something like this all the way at the bottom we now have an exercise switch this one looks absolutely horrible but if you can make it look this horrible and custom tkin term you definitely know how to change a lot of different things which means you have to look at the documentation use the custom tkin test switch and then make it look something like this pause the video now and try to implement this one yourself we have to create a custom taken test switch although first of all let me add an exercise text in here I want to create a switch and this we create with custom tkinter and then ctk switch this one first of all needs a master so window is the default argument here next up I want to have some text this is going to be the exercise switch to get started this is all we need which means now I want to pack this switch I have made an error and you can already see I made a typo the K here should be lowercase which means CT lowercase k now let's try this and there we go now we have a basic switch that by default is looking pretty good we want to make this thing look absolutely horrible so let's talk about how to customize this thing and to customize anything accustomed to kinder the first step should always be look at the documentation here's the documentation I still have the slider open but I want to look at ctk switch this one here this one has a huge amount of arguments we could be working with I actually only used a small amount of them you could make this look even worse I guess we can start with the colors I want to have a FG color of red don't forget the comma Now if I run this we get some bits of red to get the other color we need what is called progress color this in my case I want to be pink now we have red or we have pink I guess FG color sometimes he is a bit misleading it's basically the background color but you get the idea also if you wanted to you could add a tuple in here with red for the dark mode and let's say blue for the light mode if I run this now we have red as a default but if I change this to the light mode now this is blue so once again a tuple always works here to get the light mode color besides that if you want to change the color of the actual button you want the button color I'm not sure if button is the proper name but you get the idea in my case I change this one to Green now we have a green color for the button although if I hover over it it becomes white that I also want to change and for that we have the button our color I set this one to Yellow now if I run this again and I have over it it's yellow you can already see we have a ton of customization here all of the colors can be changed and this wouldn't really be doable if we used a theme because this one relies much more heavily on images so those couldn't be easily changed what we can also do since all of this is dynamically generated Wicket set is switch with if I set this to 10 you should already be able to see what's going on now we have the width of the thing being much more narrow and if I click on it nothing is going to happen although if I change this to let's say 60 now you can see we have a much wider switch you can also set this switch underscore height to let's say 30 and now you have a huge switch thingy if you want to make this thing look really horrible you can set the corner radius and this changes the corner radius of the button if I set this to a 2 now we get a very thin slider although it all still works perfectly fine I just made a mistake I just realized when we set the corner radius we are setting the corner radius both of the button and the corner radius of the background these Corners here at this corner as well so with that we have custom decanter or at the very least the basics of custom tea Kinder if you know ttk already using custom tkinder is really easy basically all you have to do is replace ttk and then the widget with custom TK and then ctk and then the widget name on 90 of the time this is all you have to do

Channel: Atlas

Views: 70,094

Keywords:

Id: MvzK9Oguxcg

Length: 19min 48sec (1188 seconds)

Published: Sat Dec 31 2022