 So, we have our program. We have everything almost done, but we don't like the default theme. Maybe you want something more colorful, not something that is so dark and depressing. So, how would you go about that? Well, in Godot there is one thing called themes. Themes are basically the set of rules that apply to all the elements, all the control elements, and how they will look like by default. If you see here, all the Godot engine has a theme that you can change. You can change it here from the editor settings. You have here the theme. So, you can set different ones and they look, you know, like you need to restart the program to make everything like count better, but you can see that everything changes. And the same way you can have different styles here is the styles that you can have in-game. So, let's go ahead and try to create one of our rounds. To do that, if you check on any of the control nodes, you will see a section here, which is called theme. And here's when you apply it. Take into account that the parent will give the theme to all the children. So, if you set the theme only to the about dialog, all the other elements are going to have the default, but the label will also have that style. So, the thing that I do is just set the theme on the scene parent. And from there, I inherit it to all of those children. Okay, let's create a new theme. We press here on the empty one, create a new theme. Then we press on it. The first thing we want to do is save it. That way we will be able to use the same theme in other scenes or whatever we would like to. Let's call it awesome theme. That's the name of our theme. I'm not sure if it's gonna be awesome, but okay. So, first thing, the default font, we can set a new font, but let's go to the resource. Here we open the editor and a new section will appear on this bottom container, which is the theme editor. So, you cannot see the theme editor from anywhere except from where you click here. It's kind of weird, but yeah. So, now we have all the different kinds of elements that you can have and you can test them here. It's a great way to, you know, like see how your theme is going. Here we have, you know, check buttons, everything menus, options, the text edit, which is the one that we use for the editor, the color picker. You have everything here. So, to start modifying the different elements here, you have to click here on edit theme and add class items. This will create a new section where we can update the style of those elements. Let's go now for a simple one, the buttons, which, you know, are one of the most used elements. Let's create it. We have here our buttons. We have different subsections, you know, we now added this to the theme. So, let's see colors, constant font and styles. So, fonts will be the same as the default font. If you want a separate font for your custom like section, you can do that, but we don't want that. And the rest, I'm not going to touch them right now. Let's go to the styles directly. What are those styles about? So, each style represents a different state of that function. You see that when I hover, it changes the color. And when I click it, it also changes. Also, when it's selected or not, for instance, you know, like I selected this, so you have an outline. This works for when you press the keys, when you are using the keyboard or a joystick or whatever to change the focus between elements. If you want to display that in a different way, but okay, let's go to the regular style. So, the button here. The normal one is the style that we have just without anything. So, let's create a new style. When you press here, you have different options. I'm going to only go through the style box flat, which is very similar to what you would do in CSS, which is just playing with colors and stuff like that. I'm not going to add any texture or anything fancy. Most of the programs don't have any texture, some buttons and things like that. So, let's go with style box and we can see that it already changed. So, let's go and now I click inside of this one. If you see here, like it's like code, you know, we have all these different sections. So, each time you are clicking on those, you get the padding here and all these properties are only linked to this line. So, background color. Let's see. We can set blue like this. Yeah, that looks okay. Draw center is just if you want to get it like flat or not, because you can also have borders. But yeah, we want to draw the center. Border width. This is again, like the border. If we want to add one, let's add to the bottom like that and to the left. So, it maybe looks like it's a little bit, I don't know, a little bit less here. Yeah, let's go with two and two. Yeah. Now, let's set the color for the border a little bit darker than the blue that we wanted. Let's see. Okay, this looks okay. Maybe a little bit darker even. Yep. And yeah, here you have different options blend, which will make it look more like you see like it has like a gradient. So, it feels more like, you know, like it has some kind of curvature or something like that. Let's add it to all the sides actually. So, it looks even from all the places. Okay. Now, the radius. This is basically like the round. And yeah, let's get them all to four. So, we have like a field button. Yeah, if we remove the blend, you can see them better. Even if we remove the border, like they're more easily to spot and I'm going to do that. You see, like how it's round like that. Okay. Now the expand margin, this is basically like how much are going to go overflowing from the element. You see that this is the end where it should be, but if we expand the margin, it will go there. And if we get it below, it's just not allowing me because you cannot expand it less than what it is. Okay. Maybe we want to expand it a little bit, but no, I think it's okay. Shadow. Well, what you would expect. We get the color. We get the transparency and everything and then the size and we will see. Let's go with a color so you can see them. You can use this also to make it glow. It doesn't have to be a shadow, of course, but yeah, it looks better with like a shadow. Let's go with dark and some transparency. Okay. And the aliasing, this is basically something that makes everything look smooth. So if you're doing a pixel art style for your UI, you want to disable this, but not going to touch it right now. Content margin, this will make the content grow. It's like padding on CSS. So if we add here on the top, you see that we get more like here 15 points on the top or 10 right now. Let's go top and bottom because we want the buttons to be, you know, like taking some space. And it's going to add five just in case in each side. So it doesn't look that weird when it's a very small button. So you can see you have a lot of options here that you can play with and you can take hours until you have, you know, the right colors, the right, you know, radius corner radius or anything. So I encourage you to play with it. And now that we have the button, let's let's go and save it. Save the theme and apply it now. Let's see. Let's create a button and we have it like here. Okay. Hello world. So as you can see, we already have the button here and it's working and, you know, we also like can apply the same theme. If you remember from previous episodes, we have here the playground. If I apply on the playground, the theme is going to load it. Awesome theme. Yeah. And the button here on this element has the eye on it with this. So, okay. Now that we have this, let's go back and edit the theme. Now that we have the normal one, we want to do the hover and the rest of them. The easiest way to do it instead of replicating all those values is this box style. You can save it as, for instance, button normal style. And now this will be a resource that you can reuse for the other states. Let's go ahead and open the editor again here for the hover. So we don't get this weird style. Let's load it again. Let's load the button normal style. And if I hover, you see like everything is the same. Okay. One thing you might see here if you use the same style for both icons is that if I modify the blue here, let's say like we make it brighter, it will also change on the other one because you're using the same resource. So how do you avoid that? Well, to avoid doing that, you can press on any resource and press here and make unique. This will copy everything, but since we already had the styles copied from before, we can go ahead and make the hover a little bit brighter. And let's try it out. When we hover, yeah, the background goes brighter. So that's my main workflow for doing styles. And you can style all the elements here. Remember just to style anything that you want to you need to first go here and edit theme other class items, select the kind of control node that you want to edit. Let's go to the text edit one, which was the main one in our tutorial and add all. So now you have this special section in your theme that you can modify everything. Remember to save the resource often. Let's see for our text editor. Let's hide this one. We also have it here, but you know, you can set all the colors for different like highlighting the like line spacing, different options for everything, everything that you want to edit, it's probably here. The same as with the buttons. You can set different styles depending if it's on focus, if it's a normal one. So yeah, this is a very basic approach on how to create themes and go create. If you can do whatever you like with those. The only thing I noticed that maybe you might want to have from other things is just a transition. There's no way to do any animations on them. It's going to be like always from one state to another. And some of the elements are kind of tricky to modify, especially because for instance, now that we modify the buttons, when we see the file dialogue, you see here, like the elements inside this dialogue also change because these are also buttons. So you have to test it all over your app. But as long as you keep the changes very simple and to the point, you should be fine. And again, as always, test everything as much as possible and have fun. But thank you very much for everyone for all the comments on the next episode. I will try to create a simple program that I need actually. So it's going to be a great way to see a practical use. And while doing that program, I will try to go over some of the points that you guys have suggested in previous episode comments. Remember to like, subscribe, and if you would like to help me making more of these videos, you can also check out my Patreon. And yeah, thank you very much again. See you later.