 After the Elementor 3.12 update, we got the brand new UI sporting that hot Elementor brand pink. Now those are Elementor's brand colors. But what about if we want our own brand colors and we want to customize the editor the way that we want? Well, that's what we are going to do inside this video. I'm going to show you how to change everything. We're not going to use a plugin. It's going to be a few co-snippets, but I'm going to walk you along the process, make a few little edits. You're going to be able to build your own custom editor. All right, let's get started. To get started, I got a link inside the description, and it is to the blog post with the co-snippets. So we have three snippets. All right, the first one, this is going to be a PHP snippet right here. And we need this for the editor side. That is going to be for this left side right over here. Now, if we go here, we got one for dark mode. All right, we got another one down here then for light mode. They are the exact same snippets, except for a couple of things. One of them has lights right here and light right here. And then the other one that's in dark mode has dark right here and dark right here. So really, you only need one of these snippets and you would just have to change this from dark to light. But I added both of them just to make it a little bit more easy. And I could show you how to use both of them just in a moment. The next one is going to be for the preview. That's going to be for the builder. So right inside here, you see the pink borders right here and the pink tab. Also this pink box right here. We're going to change all of that with this snippet. And this is a CSS snippet. I'll show you where to put it and where to edit it. And if all of this is looking a bit scary, don't worry. It actually is quite simple. I left a lot of instructions in here. And simplified it a lot. It'll make sense by the time we're finished with this video. Now, first, we want to add the PHP snippets. Now, we could do this two ways. We're going to be using code snippets for this video. But you could also use a child theme. And you could add the PHP and the functions.php in the child theme. For this one, though, we're going to simplify it. And I basically use code snippets now instead of a child theme. So yeah, that's what we're going to do here. So from here, I'm going to add a new one. And I'm going to put the editor UI light. And I'll do the light version first. I'm going to go back over here to the blog post. Let me find it. I'm going to take the whole entire thing. I want to make sure I get all of those notes. Those notes are going to help guide you along from making your edits. I'm going to take that. And I'm going to paste that inside here. Now with this, I'm going to click on Save Changes and activate. Next one, I'm going to add a new snippet. And I'll put editor UI dark. And I'm going to copy and paste the one for dark mode here. So let me copy this. All right. And let's paste it inside here. And then I'm going to save changes and activate. So I'm going to start off with the dark mode. And let's take a look a little bit closer. We have a couple of things here. Now first, we're not going to touch any of this. Don't touch it. Leave it as it is. When you see these tags right over here, these marks, this is for comments. And this is where we're looking for for our notes. So you can see here, we're going to edit everything down here. Now I have labels for everything. And I've basically marked everything to help identify what you're going to be changing. Now first thing is the editor background. That is going to be this whole editor right here. So let's say I change this. So I'm going to delete this right here where it says add your color here. When you do remove it, make sure to get rid of this slash and star. So let me take that out. I'm going to change this to red just to make it stand out so you could really see it. Let's go ahead and refresh it. And you see right there, now we have the red bar. So what I would do is I would pull out my brand colors. And I would go ahead and use those. So let me add my brand colors in here. I'm going to replace that red. I got to make sure I got that hashtag in there. And I'll save changes. I'm using my brand black right here. OK, we got a lot going on. You can see things are starting to stand out. We could change all that. If this is too dark for you, you don't like the contrast, you can make it a lighter gray or like a dark gray. Like, let's say I don't like the contrast right there. I'm going to change this to something like, let me see, 333. All right, save changes. And this is one of the common issues that a lot of people had was just it was too dark. And the contrast was hurting some people's eyes. All right, so that is the first one. I'm going to take it back and put my brand colors there because I'm making this for myself as well. The next one is going to be the header and footer areas. All right, so that is going to be up here at the top, the background right here, and the controls right down over here. So the first one, we're going to see, we're going to see the background. So I'm going to put the dark background. I'm going to put that right there. All right, the color text, the text color. Now, I want to use this lighter mint green that is part of our brand colors. I want to change the text color right here. And then this one right here is going to be a text color on hover. So I want it to get a little bit darker. I'm going to use my darker mint green right here. I'm going to copy that. And I am going to paste that right here. Let's go ahead and save changes and see what we got now. So check this out. We got this bottom right here. It looks pretty dope. We got like these green icons going on up here at the top too. We got this. You know, I'm going to make this a little bit lighter. This dark background is too dark for me. So let me go over to one of my dark but lighter colors right here. And this is what you would do as well with this. Go through one by one, get used to each one of them, and just go ahead and edit them and see how they look. So let's check this out now. Yeah, it's got like that dark purple right here, that kind of Joker feel. All right, now let's keep going. We got the next one right here. This is the big one. That big pink. Let's go ahead and get rid of it. This is for the button right down here, this update button. So let's say, let me delete that. Let me add something here. Now, it's not showing here. And we got these white lines. And the reason why is when we do add the snippet in, you can see here we are commenting out all of the styles. So all the styles have been removed. But if I go here, let's say I turn off the snippet. So it's not loading. If I refresh this, yeah, let me just go ahead and reload. It's going to be back to normal here. And if we do something, you know, we're going to get that hot pink right there. So that's the only reason why we're not seeing any of it. So let me turn this back on. And I'm going to go here now. I'm going to change this button. I'm going to do the same thing on active right here. And then I'm going to do this lighter green for hover just to give it a little bit of a hover effect. Change that. And now I'm going to save changes. And let's check this out. Yeah, let's reload that again. Let me go ahead and turn that off and check this out. Now we got our own control code. We got our own button. So everything is starting to fit. Let's go back through it again. We got quite a few and went through this really thoroughly. All right, so the next one is we got our widget colors on hover. So when you hover over these, we could give it its own color. So let me go ahead and I'm going to make a stand out of it. Let me, I'm probably not going to use this on my own template, but just to play around with it. All right, so here's the hover. I'm going to do the same for hover and active. And this all could be worked and helped out for the accessibility as well, making it easier to identify. Let me first update that. Let's refresh this. And you can see now when we hover, we got different colors. Now, let me go back over here to the next one. We have the widget border colors. And you can see now we have the different border colors. Now, as you're going through it, you're going to be styling it up and taking time on it. I could already see that this color scheme isn't working for me. I do want to go to my dark black. So, you know, for me, I do like the high contrast. It doesn't hurt my eyes, but that's just me. We're all different. And this is the reason why I feel it's important that we're able to stylize and customize our own editor to give us that option where we can, you know, create something that works for us in our workflow. All right, this is looking kind of dope right here. I do want to put the blue borders are throwing me off. So I'm just going to go ahead and create something a bit lighter for the borders. I don't really need to see them. And I'm not going to geek out too much longer because it's going to be too long of a video if I do. All right, cool. I'm going to leave it at that. Now, next one, the search and focus. That is going to be up here, this search box. So we could go ahead and give it a color. I'm going to give it this light green. And let me save my changes and see what we got now. And now we got the green search box. Let me first fix up something. I do want to fix the widget border color. So let me change that up. I'm going to give it a full black and green style right here. That way everything just looks consistent. All right, this is cool for me right here. All right, next up over here, we got the text selector. This is the one that I know for me, I was feeling the pain and I know a lot of others are feeling the pain. So this is basically, let's go here. All right, when we hover over it, you know, when we try to click and drag it over, I can't see it. You know, like that's the thing. I can't see what is being selected when I drag my cursor over. So let's change the background color on it. I'm going to put this darker green because I do want to have some contrast to it for accessibility. And let's go ahead and do that one. Save it right here, refresh it and let's go back and use our selector. Now we could see when we drag over some text. That one I know a lot of people are going to dig. That was one of the biggest complaints. All right, text color. So for me, the default text color was kind of grayish. Too gray for me. I like my text to stand out. So it's totally up to you. Maybe all white is too much but at least we have the option now to change our text color. At least it's not gray. Okay, next up over here, we are going to change the link hover and the global style indicator. If I were to turn this off right here, let me just turn that off and let's update this and refresh it. All right, if I look at this, you see it's pink if I'm using a global style. This way we could carry the brand consistency. So I'm going to copy and paste that right here. And now if I go here, check this out. Now it's green right over here. And also we also have green toggles as well. So this is like just fully branding this all for yourself. Next up, all right, the info link color. You can see if we're like to add a container right over here that you have these little links. And these are just a small little things but look here, we could go ahead and change this as well. And now you see we're carrying that brand consistency. All right, next up, let's go down here to the border color in the widget. And this is going to be inside here, inside the editor. So you got all these borders right here. Maybe you want more contrast. You want to be able to see things more in here. Maybe you want to give it a complete unique style. I'm going to keep consistent with our brand green right over here. Let me put this in and check this out. Now we have our own border colors in here. Even the slider colors right over here, all of this changes. And we just have one thing left and that is going to be the controllers. So those are going to be like right over here. Let's go to our container and we have these controllers. Now by default they're like light gray but if we were to put say our brand color inside here. Now if we go into our controllers, you can see we have our own brand colors. A complete different experience right here. So that's all that's needed to be done to edit that. Now, if you do have light mode, let me go over to my snippets. I'm going to turn this one off because now I'm going to go to my light. You're going to do the same exact thing in light mode. You're just going to have it on light and change the colors and just go one by one. But to show you how this works, I'm going to go to my background and I'm going to turn this, let me see, I'm going to just turn this purple. So it's easy to identify. And now if I were to change it to light in my system settings, you'll see that the light styles are being applied. So one thing to note though with this is it only works I found going light and dark in my system settings. It might just be what I have on this device right here. I was hoping by using the preference to work but I had some issues with this. So if you do keep it on auto detect and you just style it up for both, you should be good. Let me know how it works for you though. So the editor is all good but now we need to change this up because we got these pink borders and these are still looking very pink. So check it out. Let's go here. I'm going to use a customize for this and I found this just works best in the customize. Now you could go ahead and put it inside your site settings and custom CSS but I found that I was having some caching issues. So to avoid those caching issues I would put it inside the customizer but that is completely your call. Let me go here now and to copy and paste it. We're going to go down here to the preview builder. Let's copy and paste this whole thing and I am going to drop it right inside here. Now I got some notes here. Let me delete this right here, this duplicate. All right, there's some notes right over here. It shows where to edit and then where to stop editing. We're only going to edit these three right here. Everything else below we don't touch. Leave it as it is. We do need it here though in order for it to work. Now we got our primary, our hover and our active. I am going to use my light green right over here as my primary because I'm using a dark theme on my website but this is totally up to you. Play around with it but check it out. This is all we need to do to change this and to put our own colors and not have to use pink. And then I am going to use this dark green for my hover. All right, I'm going to go here now. Same thing, replace that. And let me go ahead and publish and then I am going to refresh it and check it out. It's all green, it's all my brand color right here. All 100% branded. We can go in here, we can play around with it, have fun with it, do whatever you want to do. This is your website. All right, the power is yours. Let me know what you think. If you got questions, definitely drop them inside the comments. Now with this, we could create our own custom experience. We can make it our brand and experience for us while we are building the site because we're the ones using it. So have fun with it, I hope they helped out. And you might notice, well, different backgrounds and a tan, that's because I'm traveling, bouncing around islands right now but still I got more content coming up and I will be back inside my studio soon. So make sure to do all that good YouTube stuff. You know, like and subscribe. I really do appreciate it. It does help to support the channel and I'll be back soon with more web design and elementary related content. All right, thank you for watching.