What I want to do next is actually style this screen a little bit. So in order to do that I want you to visit my github so you can copy some styles. And the reason I want you to copy these styles and we're not gonna write them here is because there isn't any logic by which I can teach you how to write those, they are just color changes, right? So I literally transferred those colors from hex codes to HSL values, right? So you're going to see what I'm talking about in a second, but I just want to explain why we're copying this and not writing it ourselves.
So you can find the github link in the description of the youtube video or if you're watching this on my platform you have a little icon below the video with a github logo. So go ahead and click on that and I want you to go ahead inside of my github here So you're gonna see a repository which looks similar to this, right? And I want you to go inside of the app folder Let me just zoom in even more so you can see it is better So let me view my code Find the app folder and go ahead and find globals.css. So it should be right here. As you can see, I have some additional folders here from the finished project.
You're probably not gonna have that. So just find globals.css. And inside of here, you can see that it's this exact same thing we just modified recently but now I want you to copy this entire code inside. So all of these colors have been changed and as I've said there isn't any way I can really teach you how to do this right. I just manually changed colors until it looked the way I wanted to look.
Besides that you're also going to change the background color and we'll add this little class hidden scroll bar so we can use it in a couple of places. So make sure you copy this from globals.css from my github. And now what I want you to do is go inside of the app folder here inside of globals.css remove everything and paste all of that. So there we go. Now I have this apply, I have this hidden scroll bar and all of my colors have been changed.
So as I've said, there really isn't anything I can explain here more than that. And I think that already, if you look at your app, it should look a little bit different just like this. Great! And while we are here head back inside of my github and now I want you to go inside of my public folder. So again we are here in the root of my project.
Go ahead and find the public folder and in here I have some images. So go ahead and find spooky.svg. So this is going to be the logo of our application and this is from LogoDust and you can go ahead and find even more open source logos from their website. Just keep in mind that this is only useful for demos or some side projects, right? You cannot trademark this logo or anything like that.
This is open source logo So you can go ahead and click right click and just save this image like that And now you're gonna drag and drop that inside of your public folder right here so go ahead and open this public folder and you should just have next.svg and versell.svg inside so go ahead and drag and drop this file which you can download from my github and make sure you have spooky.svg inside of your public folder like that. And great you can now close my github and we can just focus on this login screen. Now what I want to do is I want to go back inside of my auth folder, right? So app auth right here and I'm going to create a little component here and this is the way I'm going to create my components folder. So there is another type of folder which I didn't cover in the beginning which is a folder which begins with an underscore.
So create a new folder underscore components. So what does this underscore do? So similarly to this parentheses which means don't show this in the URL underscore means don't even put it in the router. Right, so no matter what the name of this file is inside even if I put page.tsx inside of this folder It will not be rendered in the router. So that's what the underscore does.
And I think it's perfect for components, especially if we have a component which for any reason is named Page. Right? Because we know that that is a reserved keyword. But if we put it in a folder with an underscore in the beginning, that tells the Next.js don't even think about putting this in the routing system. So that's why I'm going to put my components in here and for the out folder we're only going to have one component called logo.
So create a new file inside logo.esx like that and let's go ahead and import image from next image and let's go ahead and let's import popins from next font Google and let's also import our CN from s slash lib utils. If you're wondering where this comes from, that came when we installed a chat CN. So we have this lib folder and utils and we're going to use this to merge our Tailwind classes or to merge our, well, these class names which come from some weird constants like fonts, right? So now let's define this. So const font is popins.
Let's give it a subsets which is an array of Latin and let's give it a weight like this and let's give it 200, 300, 400, 500, 600, 700, actually we can, yeah 700 and 800. So all the options basically. And now let's do export const logo right here. And for now we're just gonna return a div which says logo like this so make sure you do an export const so we're not gonna do default exports when it comes to components we're gonna do named exports but when it comes to pages and layouts that's when it is very important to do default exports. But for our components that's not going to be the case.
So now I want to import this component so we can continue developing it and so you can see what's happening inside of the screen. So go back inside of your layout inside of the out folder here and just above children add that logo component from slash components slash logo and you import it using this curly brackets because it is a named export so it's looking at this exact constant so the naming matters when it comes to named exports right so make sure that this logo matches this components logo right here and save this file and now as you can see here well you actually you can barely see but I have a text logo here right next to my login box right so what I'm going to do is I'm going to change this flex, actually besides this flex I'm going to give it specific instructions to use column layout so I'm going to give it flex-col and now my logo text has changed to the top of that box right here exactly where I want to render my actual logo. So now let's go inside of logo.tsx here and let's style this. So give this a class name of flex flex-call item center and gap y4.
Then inside open up another div with a class name of background white, rounded full and padding one. So we're going to create a little circle here, right? And then inside we're going to render our image component, which we imported right here at the top. And we're going to pass in the source to be slash spooky.svg. And don't worry about this error, right?
So this spooky.svg comes from our public folder spooky.svg so make sure you add this from my github as I've instructed before and now we're gonna give this out of gamehub because it's the name of our parody app Let's give it a height of 80 and let's give it a width of 80 as well. And there we go. Now we have a nice little logo here. Now let's go outside of this div which is representing a circle and image inside and let's add a new div with a class name flex flex skull and items center and inside of here we're going to render a paragraph which is going to say game hub which is the name of our app right and let's go ahead and give it a class name, but we're going to use dynamic classes. So open curly brackets and let's use this CN function which we imported from here.
So now we can add this font class name in combination with other Tailwind classes. So in the first line I'm gonna write text extra-large and font semi-bold and below that I'm gonna go ahead and write font.classname like that and you can see how now I have my game hub it's It's in dark color so it's hard to see. We're gonna change that in a second by changing the overall dark theme of our app. So let's just leave it like this for now. And below this paragraph add another paragraph which is gonna say let's play.
And let's go ahead and give this one a class name as well to be CN and let's give it text small and text muted foreground and then let's pass in font and class name Like that and don't forget a comma after the first one. There we go. So now it says Game Hub and let's play. So how can we improve this code a little bit? It looks like I'm reusing this font class name.
How about I add that to the div itself? I think that could be better. So this is what I'm going to do. I'm going to change this first paragraph which just says Game Hub and I'm gonna change it to just use good old class name with strings like this. So I'm just changing it to class name like that.
And I'm gonna do the exact same thing for the paragraph below. So I'm basically removing that font class name because I just noticed that we can do this in a better way and I think I don't even have to collapse this paragraph like it all fits and instead I'm gonna give the font class name to this wrapping div here so let's go ahead and wrap this string of this div inside of curly brackets let's add our CN function and let's wrap the entire thing inside and then I'm going to collapse this and add a second argument here to be font class name. There we go. So now only once I'm doing this and the rest has its own classes. Perfect!
And what I want to do now is add a little apostrophe here for let's play so it's grammatically correct. But what happens if I do that? If I save, it's actually working. You can see in my page that there is a little apostrophe here. But here I have an error that this needs to be escaped so I can actually use this little snippet here to do that so instead of writing an apostrophe I'm going to write an and sign write apostrophe and then a colon so I'm gonna do this and save and you can see that in my screen it stays exactly the same so it's working and we have no errors inside of our code.
Great! What I want to do now is go back inside of my layout here and just give this two items a little bit of space because this text is too close to my box here. So at the end of these class names here, so I am in my ALF layout, right? In the ALF folder layout here. After justify center, go ahead and add space y6.
So they are separated. Great! So this now looks even better. What we have to do now is change our app theme to use dark mode. So then this text is going to become white and this is going to become even lighter.
And we also have to change the clerk components to use dark mode as well. So first let's change the clerk components. For that we have to install a package clerk themes. So go inside of your terminal and I'm going to shut down the app and write npm install at clerk slash themes like that. So let's go ahead and install that.
Let's run our app again, refresh your localhost every time you shut down your app and let's go back inside of the app folder layout.tsx. So this root layout where we actually have the clerk provider and now just below this import of clerk provider go ahead and import dark from ClerkThemes. And now give this ClerkProvider a property appearance, which is an object, base theme dark, which we just imported. And there we go, once you save, Clerk is now in dark mode. What we have to do next is create our actual application to be using dark mode.
So for that I want you to go to chat.cn.ui because this is the library we are using and I want you to go inside of the documentation here and go ahead and select the dark mode right here and select Next.js. So let's install Next.themes first. So I'm going to go ahead and copy this. Let me just zoom in so you can see so first thing we're doing is installing next themes here I'm gonna go inside of my terminal I will shut it down and run npm install next themes and you can run your app again and now we have to create our team provider so let's go ahead and do that inside of our components here create a new file team-provider.tsx like that and I want you to copy and paste this code from components theme provider or you can of course visit my github and find this exact file and copy and paste it if for any reason it is not available in the documentation page. So make sure that inside of your components folder you have team-provider.tsx and you have this exact code inside.
And let me zoom out so you can see how it looks without line collapsing. Great! And now we have to wrap our application inside of this theme provider. So I'm going to go ahead inside of the app folder again inside of layout.tsx here and let's go ahead and let's import theme provider from add slash components theme provider. So from that file which we just created, theme provider right here, you can see that this is not a default export, this is the equivalent of doing that const theme provider and then an arrow function.
You can of course also write function directly. And now you can import theme provider like that and now go inside of your body element and collapse this children and wrap the theme provider around. So theme provider and the theme provider like that and let's indent this children and now I want to give it some props. I want to give it an attribute of class, I want to give it a forced theme dark and I also want to give it a storage key to be gamehub-theme. So these three elements are important and let's revisit our application now and if I refresh here, so make sure you refresh because we shut down our app remember and there we go now this looks much better.
You can see that our text are now clearly visible because the app is using dark theme meaning that it changed the primary color of our text from black to white. Perfect! So the logo is visible, we have our game hub here and it's clearly visible that this says Let's play and even our clerk is using dark mode as well. Perfect! One more thing I want to do before we wrap this up is enable usernames to be required whenever user is signing up.
So clerk can do that and we're going to do that right now. So let's go ahead and visit clerk.com again. You can either go to Qlrk.com or use the link in the description. So, go ahead and find the app which you just created here. And you can get some...
You're probably gonna get this little confetti because we have our first user right and first thing I want to do is delete that user so you can do that by going inside of users here find the user and go ahead and delete it like this and confirm that you want to delete that user. The reason I want to delete it is because we're going to create our username field to be required and I want to make sure that there is no stale or old data for where that is not true, right? So now let's go inside of user and authentication here and let's select the first tab, email, phone and username. And in here, I wanna go ahead and enable the username. So users can set usernames to their account and you can see that it also added two little labels here required and used for sign in.
But for my case and for our case I actually don't want users to be able to log in using their username. I only want them to log in using their email. So this is your choice, right? But you can click on this little settings icon here and you can go ahead and disable sign in. So we are not going to allow users to sign in with the username and click continue.
So just make sure that this says required. Username should be required and everything else can stay the same. Click apply changes. You're probably gonna get a warning like this and you can just ignore that and click apply changes again. And now let's go ahead and refresh our localhost again and let's try and create a new account now.
And you can see now after I created my account I am still inside of our custom sign in page with our logo and our slogan here and we have a form to fill in the missing fields and it says that I need to add a username And what's cool about this that Clerk is actually going to warn users if they're trying to use a username which already exists. Right? But since this is my first user, there's no chance of that happening. But I do believe you can enter a too short username. There we go.
You can see the username must be between 4 and 64 characters. So I'm gonna change this to code with Antonio. That's gonna be my username and I'm going to click continue. And there we go. I am back inside of my dashboard and now when I click here you can see my username right here and users can also change their usernames by clicking on manage account and then clicking change username right here so you can try that out.
Perfect! So we are finally ready to actually synchronize this authentication system with our database. Because we're gonna have some list of users inside of our application. And it's also important that our app registers when someone uses this clerk toolkit to change their profile picture because they can do that as well if you just saw it in the settings. So we need to create a webhook, which is going to handle when user is created.
So we add them to our own database. We have to handle a case when user is deleted, so we remove them from the database. And we also have to handle cases when user has updated their information from the clerk settings page. So all of those cases are what we have to handle to be completely synchronized with what's going on in the clerk dashboard. And then we can finally work with our users in an advanced way by showing them on the homepage, searching for them and creating all the necessary relationships with other models which are going to exist in our database.
Perfect, so we implemented dark mode, We stylized and personalized our login screens, we enabled the username and now we are ready for some more complex stuff. Great great job.