Skip to content

Conversation

@VedantAnand17
Copy link

@VedantAnand17 VedantAnand17 commented Oct 6, 2025

Description

This PR implements a dark/light theme toggle feature for the web portfolio, allowing users to switch between themes for better accessibility and user preference.

Changes Made

  • ThemeContext: Added React Context API for theme management
  • Navbar: Added theme toggle button (mobile and desktop versions)
  • App Component: Wrapped with ThemeProvider and updated background colors
  • Hero Component: Updated with light/dark theme support
  • Tailwind Config: Added dark mode support with class strategy
  • Theme Persistence: Implemented localStorage for theme preference
  • Smooth Transitions: Added CSS transitions for theme changes

Features

  • Theme toggle button in navbar (both collapsed and expanded states)
  • Mobile-friendly theme toggle button
  • Theme preference persistence across sessions
  • System preference detection on first visit
  • Smooth transitions between themes
  • Accessibility maintained
  • No breaking changes to existing functionality

Testing

  • Theme toggle works in both directions
  • Theme persists across page refreshes
  • Mobile responsive design maintained
  • All existing animations and interactions preserved
  • Accessibility standards maintained

Screenshots

The theme toggle appears as a sun/moon icon in the navbar, allowing users to switch between light and dark modes seamlessly.

Related Issue

Closes #1

Hacktoberfest

This contribution is eligible for Hacktoberfest 2025.

raima212 and others added 2 commits October 6, 2025 02:14
- Add ThemeContext with React Context API for theme management
- Implement theme toggle button in navbar (mobile and desktop)
- Add light theme variants for all components
- Persist theme preference in localStorage
- Add smooth transitions between theme changes
- Update Tailwind config to support dark mode
- Update Hero component with theme support
- Maintain accessibility and existing animations

Resolves raima212#1
@VedantAnand17
Copy link
Author

kindly add hacktoberfest and hacktoberfest-accepted labels

@raima212 raima212 force-pushed the main branch 27 times, most recently from abb1631 to 7b580b2 Compare October 10, 2025 04:19
@raima212 raima212 force-pushed the main branch 30 times, most recently from c070c8d to 69fe6d9 Compare December 16, 2025 05:20
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.

Add Dark/Light Theme Toggle Feature

2 participants