mode toggle

[noble topaz]

I want to add mode toggle. However when I install the dependencies like the drop-down-menu and button from shadcn, the website's UI get messy. Any solution please?

[vagrant juniper]

Check if you still have Tailwind classes. Shadcn overwrites tailwind.config.ts, so it might have removed your styles. You can check out full file here: https://github.com/adrianhajdin/portfolio/blob/main/tailwind.config.ts

[noble topaz]

Thank you for your reply, I appreciate it.
When I replaced my tailwind.config.css code with yours, it fixed a few things. However as in the picture, the titles messed up, and the "Testimonials" are no longer in the center of the page as the other sections, and when I switch to light mode, everything is a mess, I highlighted "My tech stack" text just so you can see that the text is there.

[vagrant juniper]

Can you push your code to a repo? I can have a look at it and maybe I'll be able to find what's going on 😅

[noble topaz]

sorry. here:
https://github.com/moutaouakkil/portfolio

[vagrant juniper]

Alright, I'll have a look at it as soon as I can

[noble topaz]

Thanks a lot

[vagrant juniper]

You applied the "heading" class to testimonials, but it was missing from you /app/globals.css

The text colours, and styling in general will require some work. You will have to go through all the elements which aren't looking good, and add default and dark: classes to classNames - https://tailwindcss.com/docs/dark-mode
In the original project there is only a dark theme, so the classes are missing the dark: prefix, since they don't need it. You can add it where it is needed, and provide additional styles for the default (light) mode.

I added examples of the above in /app/page.tsx and /components/Hero.tsx and created a pull request, you can check it out here - https://github.com/moutaouakkil/portfolio/pull/1

[noble topaz]

Thanks a lot, I will go through everything