In this chapter, we're going to continue our development of the sidebar by adding a global theme. So I'm going to show you how I create the theme for my project and I'm going to share my globals.css file with you so that you can have the exact same look in your project. So the way I create my themes is by using ThweakCN. You can use the link you can see on the screen to let them know you came from this video. So this is a super simple application that allows you to create your custom Shazian UI theme.
And as you can see, this is actually the exact theme that I used for my previous project, which was the lovable clone. So the way I do this is just by clicking Start Customizing. And in here, I go over a bunch of these themes until I find one that I really like. And once I find something that I like, I just go ahead and slightly modify it. So in this case, this is the theme that I have selected, but I did some little changes here and there.
You can also switch between cards, dashboard, mail, pricing, just to see how it all looks together. So now what I'm going to do is I'm going to show you where you can find my exact globals.css and that is using the link on the screen to access the assets as you've already did a few times in this tutorial And in here I have added the UI folder and in here globals.css. Now I just want you to be a little bit careful when copying this for a very simple reason. When you go inside of your packages, UI, source, styles, globals.css, just make sure that these are exactly the same as these because previously if you try to do this In like a normal copy, if you try to copy global CSS from like a normal single repository next JS app, it's going to break the styling. So just be careful, right?
If you want to, you can actually just copy from the root all the way to the layer base like that and then I'm gonna do the same here I'm gonna select the root and I'm gonna go all the way to the layer base and I'm going to remove it so this is how it looks like And then I'm going to paste it. And you can see that I also added this layer base, which basically returns the pointer cursor to each button. So in here, basically I mostly copied from TweakCN after I added my theme and then maybe I did some slight modifications here and there, I'm not exactly sure. And also an important point, I have only optimized this for light mode. So I didn't really bother with dark mode for this tutorial because I think customer support apps look much better in light mode.
So let's go ahead and check out our web dev and let's see if anything has changed at the moment. So we just added our new globalist.css. So it has to probably compile that. And I don't know if you can see any difference, but I think in our previous chapter, this was darker. Now it has a white background.
So now what I want to do is I want to show you how I customized my active button because you can see that in here my active button is fairly different. So I'm going to show you how I did that. Let's go ahead directly inside of dashboard sidebar component. And inside of here, let's find the first sidebar group where we go over some items. And let's find the sidebar menu button.
And after it's active, I'm gonna add a class name prop and I'm gonna use the CNUtil to make it dynamic. So just make sure you have imported the CN from workspace UI lib utils. And now what I'm gonna do here is I'm going to very simply check if isActive item.url and I'm gonna go ahead and write my class. So I'm gonna be using a gradient to bottom. So The reason we are adding this as a direct explicit class name rather than some variable is because I didn't exactly find a way to do that for gradients.
So that's the only reason we are writing an explicit class name here. So let's go ahead and do from sidebar primary and then let's go to and now let's write a hex code of the blue color that we need and that's this one. And make sure to put an exclamation point at the end. Let's add text sidebar primary foreground and hover two. And let's go ahead and choose the same hex color, but Let's go ahead and give it a 90% opacity, like that.
And there we go. You can see now how it looks like, exactly as in my example. And now what I want you to do is just copy this class name and just add it to your other sidebar menu buttons here. So configuration items and accounts, I believe. That is the last one.
So now all of them, as you can see, will have the exact same look. Perfect. So I think that there are still some slight differences between my sidebar and ours. So let's go ahead and do a few things. Let's go inside of sidebar.tsx inside of packages.ui.source.components.
And in here, let's go ahead and let me export sidebar cookie name. I was thinking of maybe changing the sidebar width, but actually I think it's okay. We're going to change the width if needed. Once we add the chats panel here and the whole chat interface. So then we're gonna see, is this too far or not, right?
And also try collapsing it so you can see how cool this looks. I really, really like the sidebar like that. And I think this gradient effect is very subtle, but cool enough, you know, you can see it's a little bit different. It's not just a plain blue color. It's like a very subtle effect.
I personally like it. You can of course choose however you want. So I want you to export this constant sidebar cookie name and then go back inside of the layout of the Apps Web App dashboard. Is it that one? Actually go inside of the dashboard layout components.
My apologies. So Apps Web Modules UI layouts dashboard layout here. And what I want you to do is very simply import the sidebar cookie name so you don't accidentally misspell it. So this way we fixed that suggestion from CodeRabbit from before. Hey there, this is CodeWithAntonio from the future and I am actually editing this video where we add our theme and where I just told you to add this sidebar cookie name constant.
What I did here is I added this constant but I never actually tested if our app works because by all logic it should work normally. But if you actually try it out, your dashboard sidebar will always be collapsed. See? Even if you expand it and then refresh, it will be collapsed. The reason behind this is probably because due to TurboRepo, Monorepo architecture, this constant isn't loaded at the time it needs to be loaded.
So this constant is actually undefined. And then default open is always false. Go ahead and try it. If you use a constant here, which is sidebar state, it will always be closed. You can't keep it open via local storage.
But if you just copy the text that was here previously and paste it here and remove the constant. And then refresh. You can see that it starts to work again. I just wanted to bring this to your attention Because I actually didn't notice this bug until chapter 18. So I just want to give you a tip ahead.
Don't use that constant even though I literally just told you to do that. It unfortunately causes the bug. Keep it as a string instead but just make sure that it is the same string as sidebar state here. Perfect. And also let's go ahead and do the following.
I really want you to go inside of your widget page.tsx so instead of apps widget app page and go inside of use wapi here and please remove your api keys from here like that And after you removed your API keys, let's go ahead to WAPI and let's remove them together. I just don't want you to accidentally forget about this because I didn't explicitly do it. I just told you to do it. So after that, go inside of WAPI keys here and just delete all of your public ABA keys. You don't need them for absolutely anything besides some internal testing here.
The reason I'm telling you to do this is because you may accidentally, you know, publish this repository that you're working on and then all of your keys will leak. So there we go. You just click the delete button and then it will delete after some time. So please go ahead and do that. Don't let your keys leak.
And you can if you want to also delete the assistant, but that's not too important. The assistant ID isn't exactly a secret. It's just the entity ID. So you don't have to delete Tom. Tom is fine, but please just hide your API keys.
Excellent. And after you have done that, I think this marks the end of this very, very simple chapter where we just added the global theme. So from now on, it's gonna be easier for us to work here. And I don't know if you noticed, but our font just became a little bit bolder. That's because by default, I've set the font to be medium.
So I think that even this normal text now should have font medium. Let me just check inside of computed. Let's go and find Font weight 500. I think that's medium. Not exactly sure.
But yeah, we are going to be basically working with this theme from now on. Excellent. So I believe that marks the end of this chapter and it was a very short chapter. There is really no need to review this but I will still follow the normal commit flow. So I'm just going to go ahead and stage all of my changes.
08 theme, commit. I'm going to go ahead and open a new branch, 08 theme, and I'm going to publish that branch. I'm gonna go inside of my GitHub repository here. I'm going to open the pull request and I will immediately merge it. So the only reason I'm opening this pull request is for the history, right?
So that I know it happened. And so that I have a checkpoint to always go back here if something goes wrong. Really no need to review this because it was super simple. So just make sure to go back inside of your main branch and just synchronize your changes. You can also use this button.
I think I kept using the one below, but I think they are the same buttons. And then in here you should now well you can check in the use WAPI and there we go these are empty global.css well I can't really recognize if it's different or not but I'm pretty sure it's the correct one. Great amazing amazing job We have pushed these changes and see you in the next chapter.