feat: added Tailwind styles to theme switcher buttons

[Varnika060306]

✨ Improved Theme Switch Button Styling for Light, Dark, and System Modes

This PR enhances the UI of the theme switcher by updating the visual styling of each mode’s button in ThemeSwitch.tsx.

🌞 Light Mode: The light theme button now uses a bright yellow background (bg-yellow-300) with black text for better visibility and a cheerful look.

🌙 Dark Mode: The dark theme button now appears with a deep gray background (bg-gray-800) and white text, visually aligning with the dark theme’s aesthetic and making it easy to distinguish.

🖥️ System Mode: A subtle gradient (from-gray-300 via-white to-gray-300) now highlights the system mode, giving it a clean, neutral presence that reflects its adaptive nature.

All three buttons maintain consistent padding, rounded corners, and flex styling (group flex w-full items-center rounded-md px-2 py-2 text-sm) for a unified layout experience.

🎯 Purpose:
These changes aim to:

• Make each mode more immediately recognizable through distinct styles
• Improve the user interface without altering any underlying functionality
• Preserve accessibility and readability

This is a purely visual improvement and introduces no breaking changes. Happy to iterate further with hover effects or transitions in future PRs if needed! 🙌

[vercel]

@Varnika060306 is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Varnika060306]

Hi! ✨ This PR improves the theme switcher button styling for Light, Dark, and System modes using Tailwind classes. Let me know if you'd like any changes. 😊

[trillium]

Hey @Varnika060306 , these changes can't be merged and accepted as is without modification.

Your PR contains changes to two additional files that aren't relevant to the PR:

// changed files:
package-lock.json
app/tagdata.json

I'd suggest removing these files from your PR:

# go up one commit
git reset @~1
# add ThemeSwitch
git add components/ThemeSwitch.tsx
# redo commit message
git comit -m "feat: added Tailwind styles to theme switcher buttons"
# force push
git push --force

This should make sure that the intended file you're editing ThemeSwitch is the modified file in the PR.

Cheers!

[Varnika060306]

Hi @trillium
I’ve cleaned up the PR to only include ThemeSwitch.tsx as requested. Let me know if there’s anything else you'd like me to improve!

[trillium]

Hey @Varnika060306 , just a heads-up that @timlrx may not accept this PR as it’s a stylistic/display preference that blog authors can customize themselves. He generally accepts PRs that address active issues users are experiencing, and tends to decline those that are primarily CSS or style tweaks.

That said, there are a few issues with the PR:

Screenshots

Suggested PR Change – Hover (Light Mode):

Suggested PR Change – Hover (Dark Mode):

The new dark mode highlight color blends with the background, which impacts usability.

---

I appreciate your effort to improve the look and feel of the template. If you're looking to showcase customizations from your own blog, you might consider opening a PR that adds your blog link to the README instead.