**The content of this video is intended for
educational and entertainment purposes.** **It is NOT production ready.** If you're new to the channel, welcome.
If you're not new, welcome back. Last time, we were working on our Filament admin
panel series, and I mentioned some issues that I was having with doing certain things, and one
of those issues was dealing with the themes. So I went ahead and worked on it a little
bit further after that video, and I managed to get it up and working, and it turns out I
misplaced one single line. When we get to it, I will show you what it is but for now let's
head over to the documentation. Over here in the Filament documentation, if you go over to the
admin panel, and you go all the way down to where it says appearance, this is exactly where we are.
So we're just going to go up here and take a look. Here are some different methods of changing things
like the brand logo. You can change the dark mode which we did in the, I believe it was the project
setup episode when we worked on the config file. That's already done, but what I want to do is I
want to go down to where it says building themes. Now what it's saying here is that you want to
install Tailwind and the forms and typography, autoprefixer which we already have. The only thing
that we don't have is the Tippy.js, so we're going to go ahead and install that first. Now you can
use whatever terminal you want to use. I'm going to be using the terminal that's built into VS
Code, so I'm going to do NPM install tippy.js, and then we'll do save dev. Let's go ahead, let
that run, and head back to the documentation. Now if we go down a little bit, you see that
in the config file we need to bring in a few things. One of them is the Tailwind CSS colors,
and we're going to make sure that that's in the Tailwind config file, so let's copy that and
we can go ahead and just open it up and close this. We don't need that, and we can go ahead and
bring it right under the default theme up here, and bring that down, and let's go back. The
next step is to, if you're going to be using the dark mode, we're going to need to bring
in these classes, and this is the line that I actually put in the wrong spot before. I put it
under the extend, which it's not supposed to be. It's supposed to be outside of the theme,
so let's go ahead and add that as well. Now that's good. Let's go
ahead and bring in some colors. Okay, and let's go ahead and bring that
under the font family, and we should be good to go. Now you see we have danger, which
the colors are rose. These are Tailwind colors, that's what this is letting you know. That
we're bringing in the colors from up here, and we're calling them down here, and these are
Tailwind colors. If you hover over them, you see the different ones that they are bringing in, so
anything from 50 to 900 and that's pretty typical with Tailwind. We have the rose for danger, blue
for primary, green for success, and yellow for warning. I will be changing some of these later to
have my colors, but for now this is a good start. We have these plugins required but because we
have Tailwind already, we already have it so that's just this line right here. That's because
we installed Tailwind, and if you didn't install Tailwind then go ahead install Tailwind and
make sure you have your setup like this. Let's head down and take a look here. Now it's saying
you may specify your own colors which will be used throughout the admin panel, so if you're
using Vite, which we are, then we're going to bring this line into the CSS, and we also need
to create this file as well. That's something that we need to bring in, and the other thing
is to add Tailwind to the post CSS, which we already have because of the install that we did.
Let's go ahead and bring this into the vite.js. Okay, and we just need to bring it under here,
and then let's go ahead and also create this file. In the resources CSS right in here, we can just
create a new file, and we'll call it Filament.css to match the file name that we just brought in.
Let's head down. These are the instructions if you were using Laravel Mix, and this is just
really to use the CSS from Filament as well as the Tailwind CSS to make sure that you require
that. That's if you're using Mix, but if you're not then don't worry about this, but we do need
to add this line to our new Filament.css file. Go ahead, paste that in. Now you may register the
theme file in our service provider, into the boot method. Let's go ahead and grab that, and we'll
put it in the service provider that we created. Okay, and we can just put it right under, we'll
do it under here so that we still have it within the serving function, and we can just register the
theme. Now we need to also bring this in, and it will be the Illuminate Foundation Vite. What it's
doing is, it's registering the Filament.css file that we created. Now that we have that done, what
I'm going to do is I'm going to stop the server and then I'm going to restart it, and then
we'll check our changes on the front end. Let's go ahead and refresh this. Now you
see that orange button that we had here, that orangish color is now blue
because this is the primary color. In the Tailwind.config.js, the primary color
is blue so that's why that color is now blue, and if we go ahead and drop that, you can see that
this is now that bluish color, and we can still toggle the dark mode, and we still have that blue
in there but what I want to do is I want to change this to be one of my colors, which would be green.
So this primary one is now going to be green, and now the success will just be blue, and
the yellow I'm going to make it purple because that's not a color within Filament. I haven't had
anything that I use have this warning class on it. This will be so that you'll know if something
is purple, you'll know if you want to change it to a different color. You absolutely can, but
at least you'll know what is attached to, this warning class. Let's go ahead and take a look now.
It auto refreshed it, and this is now my color. If you go here, you see that now this is green. If
we put it in light mode, then I still have green. This is still green. Fantastic! If you go to
another link, you see that that color is also green, these colors are now green, and these
colors are still the same. Let's go ahead and try to make a new permission. You can
see we have green, green everywhere. Go ahead and create. Okay, now you see that
that's blue instead of green where it was before, and that's our notification. So this is
something that you can do for your colors. Now if we go ahead and change this back
to dark mode, and go ahead and log out, you see that we have this greenish color that
I added, and this is part of that coloring now. If you want to add any other colors, you'll have
a better idea of how to do it. I'm not sure that you can change these blues. This is the gray.
I think it's bg Gray 900 that's coming in from Tailwind, but if we take a look yeah see? bg gray
900. These are other things that you can change, and that might be something that
you can do in the Filament.css. For now, I am happy that these colors are
implemented and that looks a little bit more custom for you, at least you have some kind of
idea of how to do it. If you want to do these a little bit further, then you can always reach
out to the GitHub repo for Filament and ask them how can you change this, if you can change
it. That's something that you can do as well. If you're enjoying the content, please
go ahead and click that like button as it really does help out the channel.
Here's a video YouTube thinks you'll like, and here's a playlist to follow along.
Thanks for watching. I'll see you next time.
