(upbeat music) Now that we have our panel and our book resource set up, it's time we make some changes to make this app look a little bit more like ours than filament. For example, the style Laravel, maybe the colors, the font and more. For that, let's go to the app panel provider. We can make a number of customizations right here. For example, let's first change the brand name from Laravel to Booknest.

For example, let's first change the brand name from Laravel to Booknest. So the moment you do this and refresh, this changes to Booknest and also the title tag, if you look, yeah, it's dashboard Booknest. And wherever else the brand name is present, that changes to Booknest. Let's add a logo as well. Brand logo and I do have something here. I think this is the path.

Brand logo and I do have something here. I think this is the path. Let me check, I've added it in the public folder, images, Booknest logo.png. This is the one, it's there in the GitHub repository, if you wanna pick it up, or you can use your own as well. The moment you add this, we can see a Booknest logo instead of the brand name. Now, that's great. Let's add a favicon as well with favicon method.

Now, that's great. Let's add a favicon as well with favicon method. And once again, it's images slash favicon.ico. It's in the same place. Great, refresh. And right here, yeah, you see the favicon on the tab here. There's one more very interesting thing that you can customize, which is this logo size right here. You can do that using brand logo height. And you can give it, give any number here, say for example,

You can do that using brand logo height. And you can give it, give any number here, say for example, let's say two RAM and let me refresh. You see, that got bigger. I think in our case, let's make it slightly bigger, probably as it suggested 2.4 RAM. Refresh, that looks great. It looks a little prominent now. And not just here, this brand logo height is affected in the login page as well.

And not just here, this brand logo height is affected in the login page as well. So if you sign out, yes, this is what it is. Let me change it quickly. So you'll notice, let's make it one RAM. Refresh, you see, it changes everywhere. Of course, there are ways to customize different heights in login page. We'll do that later. For now, let me go back to 2.4 RAM,

We'll do that later. For now, let me go back to 2.4 RAM, and that looks great. Next, the colors that you see here, we just change the primary color to line. But you know what the default is? If you look at the documentation, the default colors used is this. That is amber for primary, green for success, amber for warning again, red for danger, blue for info,

That is amber for primary, green for success, amber for warning again, red for danger, blue for info, and zinc for gray. What that means is all these colors are from Tailwind CSS. That's the entire color palette from shade 50 to 950. And if you go to the browser, now that I changed it back to the default, you'll see where it applies. So this is that amber color.

you'll see where it applies. So this is that amber color. And if you notice, this color might not be the same as the button color, which is not same as the outline. So different shades are picked by filament for backgrounds, for text, and outlines. This is probably a shade 600 or 700, and this is maybe 400. And when you hover, it's probably 300. And the text is something like amber 800.

And when you hover, it's probably 300. And the text is something like amber 800. I'm just assuming. This is where the primary colors are used. And this email address, and probably the input borders, and all of these are the gray that is specified, which is zinc. And yes, these colors that you see here, the red asterisk, that is red,

And yes, these colors that you see here, the red asterisk, that is red, which you can change to maybe rose or something. But that's okay. And there's also info like you saw, and warning as well, which you can customize. So what I'm gonna do is I leave warning as it is, which means I'll just delete it. Success is also green, which is fine. And info is blue.

Success is also green, which is fine. And info is blue. We might hardly use info. Blue definitely doesn't look good. I'll just leave it here, which means I'll remove it. I'll remove danger as well. The thing is, I'll change gray to slate. I feel this looks better for this app. These colors, you can change them to any color from tailwind CSS,

These colors, you can change them to any color from tailwind CSS, or you can provide your custom colors. Say, for example, I would like to have completely custom shades like this for my primary color. I wanna be very specific of which shade uses what color. So you can provide your hex codes, RGB, OKLCH, anything works. If I do this, just go back and refresh.

anything works. If I do this, just go back and refresh. Notice how all the shades have been picked up perfectly. So on hover, and this is the text color and so on. You can do this not just for primary, for the broadening, danger, and everything. If you're very particular, you can change all of those. Or if you don't want to be so specific with each shade, you can also just pick any shade like so, the main one,

you can also just pick any shade like so, the main one, and you can just leave it here. What Filament does is, it creates all the other shades based on this one. So if I go back and refresh, you'll notice some changes. This probably got a little darker, and the hover got a slightly different shade. So Filament has automatically created those shades.

and the hover got a slightly different shade. So Filament has automatically created those shades. But then again, since our logo looks a little bit like the tailwind line, I'm just gonna keep it as color line for primary. This is great. Now, not just primary, gray, and broadening, these are not the only ones that you can use. You can also specify something like accent colors. If you have certain buttons,

You can also specify something like accent colors. If you have certain buttons, which you want to use this color for, later in the table or custom actions, you can actually use these colors. We don't need it, so I will just remove this one for now. In the Filament app by default, when you click on the profile icon, you will be able to change the theme

when you click on the profile icon, you will be able to change the theme to either dark, light, or the system default. So if we change it to dark, this is what we see. This is great, but we might not want to configure every single thing in our views to support dark mode. So if you don't want to support dark mode, you can remove this entire options in the panel provider by saying do that here. Dark mode, you can set that as false entirely.

in the panel provider by saying do that here. Dark mode, you can set that as false entirely. Or if you want to enable dark mode, there are a lot of options like say dark mode logo because that could be different. And there are other things like the default mode, the default theme mode that is once the user signs in, do you want them to see the dark mode, the light mode, or the system default? But in our case, like I said,

or the system default? But in our case, like I said, we are not going to focus on dark mode. So let me set this to false. Okay, now as you might have noticed, we would want to make all these changes in the admin panel provider as well. So let me open admin panel provider and I would love to have all these in all these five settings and a few more

and I would love to have all these in all these five settings and a few more in the future right here, which means we are repeating a lot of stuff. We can avoid this by creating another base panel provider. So let me do that. Let's go to providers, filament, create a new PHP class, call it base panel provider. Let's make this an abstract class,

create a new PHP class, call it base panel provider. Let's make this an abstract class, which extends panel provider effect. And here I need to define the method base panel and okay, let me just remove all of these, whatever it's suggested. And instead copy whatever I would like to. So right from our panel provider, these are the things we would like. So I will actually cut it from here

these are the things we would like. So I will actually cut it from here and go to base panel provider and paste it. It's them all here. And now in our panel provider and admin panel provider, let's first change this to extend to base panel provider. And also get the panel configuration from there. Like so, copy this, put it here as well in the admin panel and also extend the base panel provider.

Like so, copy this, put it here as well in the admin panel and also extend the base panel provider. All right, the should work. Let's just refresh and everything remains intact. If I go to the admin dashboard, ash admin, you can see that the logo and everything's there. And yes, we disable dark mode. So you can see those options are completely gone now. We changed the logo, favicon colors. Let's also change the font.

We changed the logo, favicon colors. Let's also change the font. So go back. And since we're changing it in both the panels, you can add that right here. You can add your custom font and you can pick any font from Google fonts, like pop-ins or Inter, Roboto, Notosans, and it will be changed everywhere. You don't even have to import the file nothing.

and it will be changed everywhere. You don't even have to import the file nothing. I would love to use the source Sans 3 font, which looks really good. So let's go back and see if we can make out the difference. Let me refresh. Yeah. So this is source Sans 3. Great. There's one last thing I would like to do

Great. There's one last thing I would like to do in this episode that is set up our custom theme. Now, what's a custom theme? It's actually just another style sheet which you can use for overriding some of the filament styles. Going forward, we will be making some changes. So which is why we need the theme file right now. For that, let me just close these files, open the terminal and use the command thp_attazan

For that, let me just close these files, open the terminal and use the command thp_attazan make filament theme. That's the command. And it asks which panel would you like to create this theme? I would actually like to use this for both, but there's no such option. Let me just pick any and give it some time. All right. So the theme has been created here

All right. So the theme has been created here within resources CSS filament within the admin folder because we picked admin panel. So let's go and take a look at it. Let me close these. All right, resources, CSS filament admin theme. This is what it is. I would like to just put it directly under filament refactor and remove the admin folder.

I would like to just put it directly under filament refactor and remove the admin folder. We don't need this. This theme file, as you can see, imports the main filament theme. And down here, we can add our own styles to override. These source lines that you see is Tailwind's CSS4 syntax. We can specify all the parts where we want to use the Tailwind's CSS classes

We can specify all the parts where we want to use the Tailwind's CSS classes so that they are discoverable. Mostly we don't have to make any changes. This covers it all app filament and resources views. But there are some more things we need to do to complete this creation of custom theme. To use it, let's go to the wheat config file and we have to specify that right here. So let me just create a new line

and we have to specify that right here. So let me just create a new line and our new theme file is in resources CSS filament theme.css. That's perfect. And we also need to register the theme in our panel provider. Since we have a common base panel provider, let's do that right here using the wheat theme method. And once again, the path is right here. All right, this is it.

And once again, the path is right here. All right, this is it. Let's compile the theme once using npm run build. Looks like it's done, npm run dev. So let's watch the changes. And in the theme, now I can overwrite the styles. For example, as it is, this has nothing, right? So everything looks the same. Let's go to the books resource and wait a minute. Okay, I'm not able to see the logo here,

Let's go to the books resource and wait a minute. Okay, I'm not able to see the logo here, but I can see it here, which means I didn't give the correct path. Let's go to a panel provider. I'm so sorry. This is why sometimes we shouldn't use auto complete. It's slash images and same with the favicon I feel. Yeah, slash images, now it should work. Let me refresh.

Yeah, slash images, now it should work. Let me refresh. Yeah, this is great. Back to our theme. We have this books resource where we are able to see the images and everything, just to test if everything is working, if this theme file is configured correctly. Let me say image apply hidden. So I'm using tailwind CSS here.

Let me say image apply hidden. So I'm using tailwind CSS here. Let's refresh, yeah. The image is hidden. So is the logo. Let me remove this and onto the next one.