Press J or click me!



Here's a quick overview of how to change themes with shadcn/ui.

Apply different themes.

2. Play around with themes till you choose one you want to apply.

3. After you found theme you want to apply, select the Copy code button.
4. Copy and replace the following code in app/globals.css

5. Save the changes and enjoy a new theme.

Changing the selection color.

Go to app/globals.css

Change the following hex values to your prefered color.

1./* Selection Customization */2.::-moz-selection {3./* Code for Firefox */4.background: #00d1ff;5.}6.::selection {7.background: #00d1ff;8.}

Changing the scroll colors.

Go to app/globals.css
::-webkit-scrollbar = width and height of the scroll.::-webkit-scrollbar-track = background of the scroll.::-webkit-scrollbar-thumb = main part of the scroll (thumb).
1./* Scroll Customization */2.::-webkit-scrollbar {3.width: 5px;4.height: 5px;5.}6.::-webkit-scrollbar-track {7.border-radius: 10px;8.background-color: #000000;9.}10.::-webkit-scrollbar-thumb {11.border-radius: 10px;12.background-color: #00d1ff;13.}