Dark Mode in Tkinter Applications Made Simple

Key Takeaways

what is going on guys welcome back in this video today we're going to learn how to add a dark mode to our TK Intergy applications so let us get right into it not a g it's all right so as a short motivational preview here to see what we're going to end up with this is what we're going to build today a simple login application you can replace this with an email client a notepad whatever you like and we're going to have the ability to toggle dark mode in this application this also works for the message boxes so now we have a light message box now we have a dark message box this is what we're going to build today all right so we're going to learn how to implement a dark mode feature for our TK Intergy applications in this video today and for this we're only going to use the core python package TK inter so we're not going to rely on any external fancy packages and the only import that we actually need is import TK enter s TK the rest is going to be our code now in order to add a dark mode to an application of course we first need an application so as an example project in this video today we're going to build a login application however if you want to build something else feel free to do that you can build a mail client an FTP client a notepad a chat application it doesn't matter because what we're going to do in this video is applicable to all sorts of gooey applications the principles are the same so we're going to start here by creating a class login app and this class will have a Constructor so an init method this init method is going to take a root parameter which is going to be our TK instance we're going to set this to self. root so self. root is equal to root and we're going to start right away with a Boolean which is called is dark mode and it's going to start with the default value false so our application by default will be in light mode now when we change the style of a TK in application we need to change the style of all the individual components we have buttons entries labels message boxes everything needs to change you cannot just say uh get the whole application and you know turn it to dark mode you need to implement that feature so you need to take care of all the individual components so it makes sense to First Code out the components and then to code out uh the colors for the components which is what we're going to do now we're going to start by saying self. labore username so again our application you saw it in the pre already will have username password labels for username password uh a login button and a toggle dark mode button and also a message box so we're going to say here self. label username is going to be equal to TK label TK label will be part of the root uh TK instance and the text of this label will be equal to let me just move my oh sorry for the noise let me just move my uh microphone a little bit we're going to say the text of this label is username and then self. label username will be placed in a grit layout so we're going to say grit row equals 0 column equals z as well and we're going to have some padding so padding X is going to be 10 padding Y is going to be 10 and it's going to be sticky uh it's going to stick to the West so tk. w that is just now our a label I'm going to copy that I'm going to paste it and we're going to have a label for the password as well so label password label password the text is going to obviously be password and this is now going to be placed in uh in row one so Row one column zero padding 10 padding 10 and stick to West again now in between we're also going to have a entry for the username so entry username is going to be TK uh entry it's going to be part of root and we don't have a text because that's just an entry the label is already telling us that this entry is for the username and we're going to place this entry username in the grid layout as well row is going to be zero column is going to be one so it's going to be to the right of the label and we're also going to have a padding x 10 padding x = 10 and padding y equal 10 as well we're going to copy this as well going to paste it down below and we're going to change this to entry password entry password and the important thing now here is that we need to add the parameter show equals star or asterisk just so we don't see the content of the password field um and then we need two more buttons so we need to have a self. login button which is going to be a TK button and it's going to be part of root the text of that button will obviously be login and the command of that button will be a function that we don't have yet self. login so I'm going to Define it down here I'm going to leave it empty for now self log login or def login self and then we're going to pass for now but this button is going to trigger this function then we're going to say self. login button grid layout and it's going to be placed in row equals 2 in column equals z and the column span of this button will be two so it's going to take two columns it's going to be a little bit wider and we're also going to have a padding y equal to 10 and then finally we're going to have a toggle dark mode button so toggle button is what I'm going to call it here it's going to have the text toggle dark mode and the command is going to be toggle theme so let me just move this so you can see the code we're going to have a function toggle theme and for now we're also going to leave it empty and then basically let me just finish this toggle button grd row is going to be three column zero column span two padding 10 so these are the UI elements now whatever application You're Building you're going to have different UI elements you're going to have labels entries buttons text area something else you might have different components that are not part of this application here the important thing is when you want to change the style of the application or the mode of the application to dark mode you need to do this for all the individual components which means that you need to Define The Styling in light mode in dark mode or if you just have different themes in general for every single component and because of that we're going to create now here two dictionaries which are going to be our modes so self light mode which is going to be the default is going to be a dictionary that contains the following values first BG for background is going to be white then uh foreground so FG is going to be black then we have entry BG so the background for our entry or for our entries you don't need to have a specific color for the individual entries but for one type of widget you want to have one color here um we're going to have a light gray which is going to be #e we're also going to have uh entry foreground so what is the text color inside of the entry we're going to have black here again and then we're going to have also button background so BTN BG you can call this whatever you want by the way um and we're going to say that this is a little bit darker so # ddddd so still a light gray but darker than the entry uh and we're going to say button foreground is going to be black so this is our light mode I can now copy this and I can Define the same thing for the dark mode and again if you have multiple modes if you want to have not only light and dark but maybe some color schemes you can also do that of course with more modes but I'm going to just have a dark mode here now and in the dark mode we're going to say that the background is going to be a very dark gray so 3 3 three the foreground is going to be white the entry background is going to be a little bit lighter than the background so 555 color is still going to be white text color is going to be white the button back background is going to be 444 so right in between the background and the entry color and the text is going to be white so now we have these two modes uh defined and we need to apply them to the individual widgets and for this we're going to define a function called apply theme so we're going to say def apply theme which is going to take self as an argument and the theme as the argument so the dictionary and we're going to say here now self. root config and in the config of uh the element itself of the root element itself of the TK instance itself we're going to set the background equal to the theme dictionary and from the theme dictionary the background field so this would be white in the light mode and this dark gray in the dark mode so this is just for the background of the application in general now in the application we have widgets so we can say for widget in self. root and we can now iterate over the widgets we can say w infocore children to iterate over the widgets and then we can say the widget type is whatever the widget is. woore class so we see okay for every widget that we have in application what kind of widget is it this makes more sense than going through all the buttons manually if I have 500 buttons now this is Extreme but if I have 500 buttons I don't want to list manually all the buttons I just want to say iterate over all the widgets if the widget is a button do this if the widget is an entry do this so we're going to say here if widget type equals equals and we're going to start with a label if the widget is a label what we want to do is we want to say widget config and we want to change uh from the lab lab the background to theme and then uh background actually so for the for the label we're going to use the same thing as for uh for for the root itself and foreground is going to be theme foreground so that's for the label L if widget type equals and we're going to have entry and for entry we're going to say widget config now the background here is going to be equal to the theme and then to the entry background and the foreground is going to be equal to theme entry foreground so every entry will get the styling whatever The Styling is and then we can say LF widget type equals equals button um then we're going to say widget. config background equals theme button background foreground equals theme button foreground all right so we have the configs here um now for the entry we also want to actually have uh insert background so insert background is is going to be equal to the theme of the foreground in general so the foreground color in general so the idea here is quite simple we have many different components and all we have to do is we have to uh know what kind of components we have we can have 100 entries 500 buttons six uh 6,000 labels if you want to you don't have to go through the individual components you just have to go through all the widgets and then you have the branches for the individual types and depending on the types of widgets you just apply different settings and the settings are defined in the modes in this case light and dark mode but you can have 100 themes as well um so that is the apply theme function now this apply theme function we want to call it right away in the beginning self. apply theme because we want to start in light mode and our light mode is different from the from the uh default TK inter styling so we're going to say here self. light mode this is by default um not the same as this so the TK inter styling is slightly different than this so we call our light mode here and then we need to also Define the toggle theme function maybe let's put it up here the toggle theme function is very simple all we have to do is we have to see what's the current theme and then to change it to the other one so we're going to say if self. is dark mode self. apply theme and then self. light mode else if self is not dark mode so if the dark mode is not currently active active we're going to apply self. dark mode and then we're going to say self. is dark mode is going to be not self do is dark mode so we're going to basically uh negate the current is dark mode variable so if it's true it's false if it's false it's true and depending on the value we apply the other theme um and then finally all we need to do is we need to also implement the login now the login itself is easy but one tricky thing about the login is the message box now in TK inter we have message Boxes by default but we cannot easily style them we cannot just say okay give me the default message box and apply my styling in order to have a dark mode message box we need to Define our own message box class but let's first of all implement the login logic in general we're going to keep it extremely simple here we're not going to have a database uh we're not going to have actual login information we're just going to say username um is self. entry username doget so this is going to be the content for the password we're going to do the same thing with the with the entry password um and then we're going to just compare them to fixed values this is just so we have a dummy login system you can also of course connect this to a database if you want to we're going to keep it simple we're going to say if username is equal to user and password is equal to pass if that is the case we're just going to display a message box for now I'm going to pass um and otherwise we're also going to display a message box but a different one and that is basically our login logic now the message box as I said needs to be defined in its own class because we need to customize The Styling so what we're going to do is we're going to say class custom message box and this now is going to inherit let me just zoom in a little bit this is going to inherit from TK top level so top level to create our own t PK component here and we're going to say uh def uncore init uncore uncore and we're going to have here the following information parent title message theme those are the arguments that we pass here to the init function and what we're going to do is we're going to call the super function so the super Constructor of the top level class um so we're going to say super init and then we're going to pass here the parent and the rest is going to be our own customization so self. theme is going to be equal to theme and then we're going to say self. title of the message box is going to be the title self. geometry of the message box is going to be just 300 time 100 pixels we're going to say self. config is equal to uh or actually not equal to self. config and the background is equal to self. whatever the theme is that we pass to IT background so we continue with the styling that we did up here we do also the same thing here in the Constructor already of the custom message box that we Define so self. label is going to be the message TK label it's going to be part of self and it's going to have the text message and this message is whatever we want to say like successful login or login information was invalid whatever and we're going to say here now background of this label is going to be uh self. theme background and the color of this text so the color of the label the foreground is going to be self. theme and then foreground and then we're going to say self. label pack so for this we're going to use a pack layout not a grid layout we're going to say padding y equal 20 padding x = 20 and then we're going to say self. okay button just so we can close the message box um this is going to be a tk. button it's going to be part of self the text of this button is going to be okay and then we're going to say that the background of this button is going to be self. theme button background the foreground of the button is going to be self. theme and uh button foreground and a command command of this button let me just scroll up a little bit again or scroll down actually the command of this button is going to be self. destroy so it will destroy the message box it will close it to keep it less dramatic self okay button pack and then padding Y is going to be 10 and that is basically our message box so this message box here this class is our customized um message box that we can pass a theme to and this theme will influence then the color of the label of the message of the background itself and of the button so what we're going to do now is we're going to say if the username and the password are correct we're going to say custom message box self. root is going to be the parent login is going to be the title and then the message is going to be successfully loged in and we're going to pass here uh for the theme self. dark mode if self. dark mode is dark mode and then else we're going to pass self. light mode light mode and we're going to copy this if the credentials are invalid we're going to keep everything the same name other than the message login failed there you go so the only thing that we need to do now is we need to actually create a TK instance and create an instance of our class so we're going to say root equals TK TK root. tile is going to be login app and then the app is going to be the login app instance passing the root here and then root main Loop that is it I can run this now and we have a problem uh top level is lowercase actually so top level with a lowercase L and the rest should actually be fine we have our no we don't have our password box why is that [Music] because we placed it I think in the wrong row could that be the case yeah it should be in row one there you go so we have our username password login here I can type some stuff we get login failed here and I can then toggle dark mode everything's dark now also the message box so let's recap real quick what we did here we have our UI elements and in your application this might be different you might be building a different GUI application but you have your different components you have different widget types you need to keep track of those we have buttons entries labels maybe you also have something else in your application and and then we have our apply theme function which applies a dictionary one of the two dictionaries up here with the values for the individual components depending on the widget type we iterate over the children over the widgets of the root window we look at the type of the widget and depending on the widget type we apply a different styling which is defined by our dictionary and of course we can do that here with different uh color schemes not just with light and dark mode so yeah this is how you implement mement a dark mode feature into your TK enter GUI applications so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this Channel and hit the notification Bell to not miss a single future video for free other than that thank you much for watching see you in the next video and bye