Add dark mode toggle to the first-contributions website

[Alimilla-Abhinandan]

🐞 Problem
The website currently only supports a light theme, which might not be comfortable for users working in low-light environments.

🎯 Goal
Improve user experience and accessibility by adding a dark mode toggle, which is especially useful for contributors spending long hours reading or contributing at night.

💡 Possible solutions
Implement a CSS-based dark mode toggle with local storage support to remember the user's preference.

📋 Steps to solve the problem

Comment below about what you've started working on.

Add, commit, push your changes.

Submit a pull request and add this in comments - Addresses #

Ask for reviews in comments section of pull request.

Celebrate your contribution to this project. 🎉

[HarshilChavada04]

Hey, This sounds like a great feature to add! I'm ready to work on it -please assign me.

[MitttapalliAbhishek]

Hey,
I would like to work on this issue, I'm also available to work on any other issues you have.

[shalmalee98]

Hey, seems like a good start to contributing, could you please assign it to me? @Roshanjossey

[K1N6D0M]

I’m working on this! Will implement a CSS-based dark mode toggle with localStorage support.

[varuntyagii]

Hi, I would like to work on this issue. Can you please assign it to me?

[Adil-im]

Is anyone working on this issue?

[subhisharma409]

Hey , this is my first contribution to this project.. Can you assign it to me ?

[Roshanjossey]

HI @subhisharma409, could you share a screenshot of what you see when you go to the webapp?
Then describe what you want to work on

[Vishnu912py]

Add Dark Mode Toggle Feature

Feature Summary

Added a comprehensive dark mode toggle feature to enhance user experience with theme switching capabilities.

Key Features Added:

• 🌙 Dark Mode Toggle Button: Sun/moon icon button in the top-right navbar for instant theme switching
• 🎨 Complete Theme Support: All components (navbar, cards, inputs, buttons, text) now support both light and dark themes
• 💾 Persistent Preferences: User's theme choice is saved in localStorage and persists across sessions
• 🖥️ System Preference Detection: Automatically detects and respects user's OS dark mode setting by default
• ✨ Smooth Transitions: Elegant CSS transitions between light and dark themes
• 📱 Responsive Design: Toggle works seamlessly on all screen sizes

Technical Implementation:

• New Component: DarkModeToggle.astro with interactive JavaScript for theme switching
• CSS Custom Properties: Added --bg-primary, --text-primary, etc. for theme variables
• Global Theme Classes: Uses html.dark class for theme switching
• Component Updates: Modified 8 components to support theme-aware styling

User Experience:

• Click the sun icon (☀️) to switch to dark mode
• Click the moon icon (🌙) to switch back to light mode
• Theme preference is remembered across browser sessions
• Smooth color transitions provide polished user experience

Files Modified:

• src/components/DarkModeToggle.astro (new)
• src/layouts/Layout.astro
• src/components/Navbar.astro
• src/components/App.astro
• src/components/ProjectCard.astro
• src/components/ProjectList.astro
• src/components/SocialShare.astro
• src/components/IssueList.astro

This feature significantly improves accessibility and user comfort, especially for users who prefer dark themes or work in low-light environments. 🎯

Dark Mode

Light Mode

can I make a pull request

[Vishnu912py]

so is it ready to be merged

[hemnath-hub]

/assign