How to Customize Colors, Logo, Font Family, Favicon & Disable Dark Mode - FilamentPHP for Beginners

what's up developer says Dory here and welcome back to a new video where we're going to continue on with the second episode of our filament PHP video series where we're going to customize for them in PHP its team currently the filament PHP dashboard appears empty but this is intentional and completely fine as it allows for easy customization to suit your preferences you can adjust the primary color fonts change the logo in the top left corner modify the flavicon and even disable dark modes for the entire admin panel let's start off with the most notable one which is the colors of the admin panel these needs to be changed inside the filament service provider luckily we got it open so if you look inside our panel you will see that it has a method named colors chain to it right here we need to define the color of the entire admin panel Now by default filament PHP ships with 6 pre-defined colors and at the moment they have to find one which has been set equal to the color amber the amber color is coming from filament PHP it's color class as you can see right here so let's click true on it where you will find tons of color constants which are the color options that Tailwind CSS has to offer now the values right here are all key value pairs where the key is the color tint and the value is the base color these things are created by adjusting the lightness and saturation of the base color with 50 being the lightest as you could see right here where the last one is 950 which is the darkest now let's take two as an example if the base color is 2 you can use bg-2-50 for a very light slate and BG that slate that's 950 for a very dark teal this allows you to easily create a consistent color palette with a range of Shadows and tints so let's close off the colors class now let's focus on our primary color let's replace the amber color that we have with let's say blue if we then navigate to the browser and refresh it will see that the primary color of our admin panel so basically the dashboard color and the icon has been changed to Blue obviously in most cases you want to use a different color than the colors that Tailwind CSS has to offer filament PHP allows you to generate your own palette based on a singular hex or RGB value if we navigate back to phpstorm you can see that we could basically remove the color class that they have predefined for us let's replace it with a spring where we could pass in a string of a hex value so let's say hashtag 674 cc4 once we navigate back to the browser and refresh it you will see that the primary color turned into a purple color we could also pass in an RGB value as a string so let's get rid of our hex code and let's pass in the RGB method or we need to pass in 103 comma 76 comma 196. once we navigate back to the browser and refresh it you'll see that the color has not been changed since we're already inside filament PHP at service provider let's actually have a look at how we can easily change the font family over admin panel we open the Resources directory the views directory you will see that filament PHP has not added any views right here the reason filament PHP does not add it is because it uses the vendor directories to store its views this is a common practice in PHP packages and libraries reviews assets and other resources are bundled together in the vendor directory for Easy distribution and installation now you can't make any changes inside the vendor directory because once you run the composer update commands all your changes will be gone and we could also not add a link tag of a new Google font inside a hashtag over HTML document to change the font because we only have the welcome.blade.php file luckily we could chain a method to our panel object so let's say right below the color of you probably guessed it font in case you want to change the font I recommend downloading it from Google fonts store it inside a newly created directory named fonts in either the public or Resources directory and use it right here quick note by default a filament PHP uses the inter font if we navigate back to Google Chrome refresh it you will see that the font is still the same and let me actually zoom in a little bit if we navigate back to phpstorm and replace enter with let's say pop-ins navigate back to Google Chrome refresh it and right here you will see that the font has been changed and honestly I'm kind of a fan of this Poppins font so let's keep it as it is now when creating an admin panel you most likely want to replace a logo with your own as quickly as possible you might be wondering how you could do that since I just mentioned that filament PHP has a view stored inside of vendor directory now one advantage of using the vendor directory is the fact that you can easily overwrite certain files so let's see how this works if we navigate back to phpstorm open the vendor directory for a moment scroll down and search for the filament directory inside of it open it now let's open the filament directory inside of it and in here you will find a couple directories which should sound familiar to you and one of them is the Resources directory where you will you guessed it store resources such as views JavaScript files styling and many more now let's open the views directory for a moment composer directory and scroll down again where right at the bottom you will find a logo.blaze.php file what we need to do right here is recreating this pass inside our own Resources directory where we could overwrite the particular logo that blade.php file so let's do that let's scroll up inside our views directory we're going to create a new directory let's say vendor and if you add a forward slash right here it will basically create a subdirectory for you so let's say filament dash panels forward slash components now in here we're going to create a new file with the name of logo.blades.php so whatever we add right here will overwrite the logo.blaz.php file inside the vendor directory it's not required to add an image right here which you obviously want but you could even add a string right here so let's say hostinger if we navigate to the browser refresh it you will see that hostinger has been printed out now let's navigate back for a moment and let's create an image tag right here we do need to define the source just give me a moment let's define the alt tag where we're going to say logo hostinger and let's close off the image tag now there are two things that you could do right here for the source you could just pass in a URL which I have done right now and I will add it in the description down below navigate to the browser refresh it you'll see that it has added hosting or its logo or we could navigate back to phpstorm or what we could do is basically creating a new directory inside the public directory let's name it images what we could do then is basically adding the image inside of it so pause the video do that I will do that too and I'll see you back once that's done if your image is located inside a public directory we could get rid of our URL use curly brackets call the asset method and pass in the path from the public directory so let's say images forward slash hostinger Dash logo.png if we navigate back to the browser refresh it you will see that we have added a logo of hostinger in the top right corner now there's one thing that I want to change and that's the size and since we are using Tailwind CSS we can simply pass in a class right here of let's say height 16. if we navigate back to Google Chrome refresh it you will see that we have changed the size of our logo we could also change the fluffy comb which we need to do through the service provider again so let me open my admin panel provider and let's say right under my fonts method I'm going to chain a new method called fluffycon then we need to ask the image pass to it now once again I will store the fluffycon inside the images directory I will also add a link to the description for the image so you could download it as well for now I'm going to add a pad of images forward slash fluffycon.png if we navigate back to the browser refresh it you will see in the top left corner right next to dashboard laravel the title of our page we have added our faficon icon now the final configuration that I would like to show you is disabling dark mode and personally a huge fan of dark mode so I would never disable it myself but I do think that it would be nice to show you how that's done right inside our filament PHP service provider we need to chain the dark mode methods to our panel object again where we need to pass in a Boolean by default dark mode has been enabled so there's no point of passing in true right here since it is the default value but what we could do is basically passing in the value of false which should turn it off so let's navigate back to Google Chrome let's refresh it toggle our icon in the top right corner where you will see that we can't enable dark mode anymore now like I said I love dark mode so I'm gonna enable It Again by removing the dark mode methods for now I want to wrap up this video where we talked about changing the primary color the logo the favicon over admin panel and we have disabled dark modes now this was it for today's video If you do enjoy my content and you want to see more please give this video a thumbs up and if you're new to this channel don't forget to hit that subscribe button

Channel: Code With Dary

Views: 9,352

Keywords: how to change logo in filamentphp, how to change font in filamentphp, add favicon filamentphp, how to add admin panel in laravel, 10 create custom widgets - laravel filament tutorial, a winning combination for dynamic web apps in laravel filament, laravel filament packages dashboard, filament admin panel, introduction to laravel filament, how to setup filament laravel, how to build admin panels in laravel, filament for beginners, learn filament step by step

Id: 7w9YZc11nP4

Length: 10min 29sec (629 seconds)

Published: Wed Aug 16 2023