In this chapter we're going to learn how to change the theme of our project. And I'm going to show you two ways you can do that. The first one is to simply visit my public assets folder or if you have access you can use the source code. Basically just visit the link you can see on the screen or the link in the description. And from in here you can find globals.css.
And in here you can click copy or you can manually select and copy things. And then go inside of your source app globals.css, ensure that you're on your main branch, and you can synchronize changes if you aren't sure. Make sure that the last merge was 14, and simply replace the entire globals.css file. So in here, alongside changing all the colors, this will update as well. This is basically what enables Button to have a cursor pointer, just in case you were wondering.
So this is new, and basically the colors were modified. And if you take a look at your app now, you will see that we have this new orange color. And if you go to the dashboard, you will see that it's more of a yellowish color. So this is the one that I like. But I want to show you exact place where I found this and how you can create your own CSS theme.
So for now what I'm going to do is I'm just going to revert this Simply so it is the old global CSS. You don't have to, right? If you like the theme you can copy from my github assets, you can use it. But let me show you how I even found that theme. I basically used tweakcn.com.
Again, you can use the link in the description or the link you can see on the screen. And in here, you can go inside of Trite now. And you can basically click here and find a bunch of different themes for ShadCNUI. And I think it is super cool. And the one I selected was Claude, right?
And in here you can check how it looks in light mode and how it looks in dark mode. I think this is an amazing project. It has so many themes you can try from. So I purposely want to pick something that I haven't tried before. Let's see, how about I try this Claymorphism.
So the way you would do it is you would click on code and in here you can see that they are taking care of Tailwind versions, right? So I would take Tailwind version 4. And if you want to, you can just use the CLI to do it. But you can also just copy this, and then you will have to replace your root, your dark, and theme inline. So let me show you how you do that.
So starting from the theme inline, root, and dark, we select all of these and you can remove them. So this is how the global CSS looks now. And you just paste the new one here. And that changes the entire look of your app, as you can see. It looks very different now, right?
So if you like this one, you can use this one, right? I personally like the look of Claude, So I'm going to select Claude right here, code, and I will click copy. And then the same thing. You basically select the root, the dark, and theme inline. And you can delete it.
So this is how it should look like and paste your new ones here. And then your app should look like this. I think this is a very, very nice look. And it has nice borders. Everything just looks nice with this style.
Again, I don't know how well this website will be maintained. I don't know if this will be available, you know, two years from now. I hope it will because it's an amazing project. But then again, ShadCN can update a lot and they will probably update their app accordingly to that. So because of that, I'm offering you myglobals.css, which you can copy from the source code or the global assets, and just paste the entire globals.css inside.
And if you're using this, myglobals.css, you will notice that now buttons have cursor pointers. They look clickable, right? Each of these buttons look clickable. That is because of this part, let me show you. This one.
So if you don't have this, it will not come with TweakCN. So it doesn't come with this. I added this myself in my global CSS. So basically, this is a way to enable cursor pointer for all buttons which are not disabled. So you can add this little snippet if you want to, and then your buttons will have proper cursor pointers.
I just think that this looks way better than anything else. Now let me try and go to one of my previous projects where I have a lot of fragments. You can see how now fragments look clickable, right? They have a proper cursor on them. Great, I am super satisfied with this one, so I will leave it at this.
And while we are here, there is just one more thing I want to do. So just go in any of your projects. And let's go ahead and do the following. Select your theme, I would recommend using my global CSS. And then later at the end of the project, you can modify it to whatever theme you like.
But it will be easier for you to have the exact same result as me, so that's why you can use my global.css. Keep in mind that this is for, let me show you, next version, for next 15.3.4, right? So if you are watching this two years from now, I have no idea if it will work for you and whatever is the latest version. But if you're using a similar version like me, or if you're using the exact version as me, it will work. Great.
So now let's go ahead and do one more thing. Let's go inside of our button, inside of source components UI button, and in here I want to add a new variant called tertiary. I don't know how to pronounce this to be honest. I never, I always mess this up. But basically it's going to be background primary with 25% opacity.
On dark mode it's gonna be BG primary again but 30% opacity. Text will be primary, shadow will be extra small, hover will be BG primary 20, BG primary 20. And on dark mode, hover will be BG, Let me just check. On dark mode, hover will be BG primary 25%. And now go inside of your project view here.
And in these tabs, find the upgrade button and give it a variant of this new one, however you pronounce this, right? And then when you look at it, it will look like this. So kind of a lighter version. And let me switch to dark mode and still looks good. And of course check your app in dark mode to see it looks fine.
I very much like this look of the app more than all the other themes but you're of course free to choose your own and I like how this becomes orange now when you resize your panels. Great! So this was a very very easy chapter so let's go ahead and just quickly merge this so mark this as complete and 15 theme. I'm going to open a new branch here Let me just see what it will change. We'll change this to third theory, this new variant here and we change our theme overall.
So I'm going to create a new branch, 15 theme, I'm going to add all of the changes. 15 theme, I'm going to commit and I'm going to publish the branch. And there's really no need for any review because this was a super simple change. So I'm going to immediately merge this pull request so we speed things up. There we go.
So just three simple changes and we can immediately merge it. We don't need to wait for any review this time. It's much simpler. And after that's done let's go inside of main and let's synchronize our changes. And then your last merge here should be 15 theme.
Amazing, amazing job and see you