Now let me preface this by saying you should generally leave styling to Nova. That's the entire idea of Nova. You don't have to sweat the UI. It will do it for you. But it would be nice to be able to tie Nova in a little more with our project, with our brand guidelines, and Nova certainly allows for that level of customization. Let me show you how in this episode. So the first thing I want to tackle is this Laravel Nova logo here. If we jump into the project files and I open up the nova-config file, that was published when you ran the php nova:install command, you can search for branding and down here around line 150 you'll see a section commented out. We can uncomment that because we want to customize the branding. And I'm just going to re-comment the color section and we'll come back to that in a moment.

section commented out. We can uncomment that because we want to customize the branding. And I'm just going to re-comment the color section and we'll come back to that in a moment. For the logo key, we're going to want to update this placeholder with a real logo. Now in my project, I keep my logos under public/logos and I think this no-slogan-dark will do us just fine. So I'll replace this with public_path and we can say logos/no-slogan-dark. There we go. And if we jump back into our project and refresh, you'll see our logo update. That's how simple it is to switch out your logo. You'll want to use an SVG so it can dynamically resize, but there is a slight issue with our logo as is. If I head up to the light/dark mode picker here and I select dark, you'll see our logo disappears. We can't see it anymore and obviously that makes a lot of sense. It's currently a dark

up to the light dark mode picker here and I select dark, you'll see our logo disappears. We can't see it anymore and obviously that makes a lot of sense. It's currently a dark logo on a dark background. There is a little trick you can pull here to make sure that your logo works correctly. I'm going to jump back into the project and I actually have already created a logo called logo-no-slogan without any of the suffixes. If you take a look at this you'll note that I'm setting the fill to none on the SVG and then I'm using a little bit of Tailwind goodness to say look when we're in dark mode set the text color of this SVG to white and then anywhere where I would generally use a text color I've set the class to fill-current which will just fall back to whatever you've set on the top level SVG. So if I go back into my Nova file here and I alter this to be just the logon.

set the class to fill current which will just fall back to whatever you've set on the top level SVG. So if I go back into my Nova file here and I alter this to be just the logon no-slogan rather than the dark variant and then we jump back in and refresh you'll see that this is now a white logo. If I change to the light theme it's now a dark logo. So something you'll want to factor in. You don't want your logo disappearing and complaints coming in that people can't use your application properly. So it makes sense that you would obviously spend a little bit of time customizing your SVGs in order to make it legible in both light and dark mode. The next thing I want to tackle is this blue color scheme that Nova ships with. If we look at our project I actually have a green color scheme. To be more precise I have a Tailwind Emerald color scheme. If I jump into the project files and uncomment

ships with. If we look at our project I actually have a green color scheme. To be more precise I have a Tailwind Emerald color scheme. If I jump into the project files and uncomment this color section you'll note we have three options available. A 400, a 500 and a 600 and this works the same way as Tailwind. 400 is the lightest shade and 600 is the darkest shade. We can use HSL values, RGBA values, RGB values here, whatever makes sense. In our case I want to copy the 700 which is our base color for our 500 Nova scheme. I'm going to do the same with 500 for the 400 scheme and I'll use the 900 here for the 600 scheme. If you're wondering what this is by the way this is Raycast and I'm using a Tailwind plugin for Raycast in order to be able to search the Tailwind colors. I highly recommend it. It's a free product and it saves you a lot of time. If I now jump back into our project

for Raycast in order to be able to search the Tailwind colors. I highly recommend it. It's a free product and it saves you a lot of time. If I now jump back into our project and refresh, you'll see that we're now using this nice green color throughout our UI for all of the buttons and for anything that makes sense. So that's how simple it is to update our logo and colors to make our administration panel feel like it's part of our application rather than just a bolt-on on the side. There is one more customization tweak I'd like to make. If I jump into Users and I drill down into Luke Downing, you're getting a little insight here into how Nova works but there are no breadcrumbs. I really like breadcrumbs because it reminds me where I am in the application and allows me to easily navigate back. Thankfully Nova makes it a breeze to add breadcrumbs.

are no breadcrumbs. I really like breadcrumbs because it reminds me where I am in the application and allows me to easily navigate back. Thankfully Nova makes it a breeze to add breadcrumbs. I'll jump into the NovaServiceProvider. This file was created when we ran the php artisan nova:install command in the previous episode and I can call Nova with breadcrumbs and if I do that and jump back into the application you'll see breadcrumbs appear at the top. I'm able to navigate back and forward using those breadcrumbs and I get a good overview of exactly where I am inside the administration panel. So completely optional. You don't have to make that change but for me it's worth it. I really like breadcrumbs and it's nice that Nova makes it so easy to add them in if you want them. Okay I think that's enough branding for now. It's time to get into the nitty gritty. In

that Nova makes it so easy to add them in if you want them. Okay I think that's enough branding for now. It's time to get into the nitty gritty. In our next episode we're going to create our very own resource to represent Books in our system. I'll see you there.