Skip to content

feat(ui): add dark-mode support across all UI components#244

Closed
sarmadhamdani02 wants to merge 2 commits intocoderamp-labs:mainfrom
sarmadhamdani02:main
Closed

feat(ui): add dark-mode support across all UI components#244
sarmadhamdani02 wants to merge 2 commits intocoderamp-labs:mainfrom
sarmadhamdani02:main

Conversation

@sarmadhamdani02
Copy link
Copy Markdown

🔥 Description

This PR adds full dark mode support across the UI, ensuring consistent styling for text, backgrounds, and borders.

🛠️ Changes Made

  • Updated all UI components to support dark mode.
  • Applied:
    • Text Color: text-[#FFFDF8]
    • Backgrounds: bg-gray-900
    • Borders: border-gray-700
  • Ensured buttons, inputs, dropdowns, and interactive elements adapt to dark mode.
  • Fixed Tailwind dark mode behavior by setting darkMode: 'class'.

🎨 Screenshots (Before & After)

Before After (Dark Mode)
🌞 Light Mode UI 🌙 Fully Themed Dark Mode UI
image image

✅ How to Test

  1. Run the project locally.
  2. Click the dark mode toggle in the navbar.
  3. Ensure text, backgrounds, and borders correctly switch between light and dark mode.
  4. Refresh the page → Dark mode should persist.

⚠️ Checklist

  • UI elements follow dark mode styling.
  • Toggle button correctly switches themes.
  • Dark mode setting persists across refreshes.

🤝 Additional Notes

  • Let me know if any components still need adjustments.
  • Future improvements: Add animations for theme transitions.

🚀 Ready for review & merge!

@cyclotruc
Copy link
Copy Markdown
Member

@sarmadhamdani02 Hi

thanks a lot for your contribution

It looks good so far, one minor thing I caught was this:
image

It seems like this the text fields in the form need some adjustments to be properly displayed in darkmode

Let me know if you need any help

@sarmadhamdani02
Copy link
Copy Markdown
Author

@cyclotruc
Thanks for reviewing the PR and figuring out the problem. I'll be fixing this ASAP.

@filipchristiansen
Copy link
Copy Markdown
Contributor

@sarmadhamdani02 Any update on this? If not, I will close it for now.

@filipchristiansen filipchristiansen marked this pull request as draft June 21, 2025 23:11
@filipchristiansen filipchristiansen changed the title Add Dark Mode Support Across UI Components feat(ui): add dark-mode support across all UI components Jun 23, 2025
@cyclotruc cyclotruc closed this Jul 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants